Skip to Content
Function Components
Function Components and Props

Like any component, function components can receive information via props.

To access these props, give your function component a parameter named props. Within the function body, you can access the props using this pattern: props.propertyName. You don’t need to use the this keyword.

export function YesNoQuestion (props) { return ( <div> <p>{props.prompt}</p> <input value="Yes" /> <input value="No" /> </div> ); } ReactDOM.render( <YesNoQuestion prompt="Have you eaten an apple today?" />, document.getElementById('app'); );

In the above example, we pass a value of “Have you eaten an apple today?” as the prompt prop when rendering YesNoQuestion.



Open NewFriend.js.

Rewrite the NewFriend class component as a function component.

Make sure to delete the original NewFriend class when you’re done.

Click Run and make sure that your new friend is still there!

Folder Icon

Take this course for free

Already have an account?