Learn

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.

Instructions

1.

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!

Sign up to start coding

Mini Info Outline Icon
By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.

Or sign up using:

Already have an account?