Warning: sizeof(): Parameter must be an array or an object that implements Countable in /homepages/45/d488136922/htdocs/fcc/wp-content/plugins/wp-membership/admin/pages/payment-inc/paypal-submit.php on line 11

Warning: session_start(): Cannot start session when headers already sent in /homepages/45/d488136922/htdocs/fcc/wp-content/plugins/unyson/framework/includes/hooks.php on line 258
Pass Props to a Stateless Functional Component – FreeCodeCamp Solutions

Pass Props to a Stateless Functional Component

Pass Props to a Stateless Functional Component

QA status: Review Complete


Challenge: Pass Props to a Stateless Functional Component

Intro: The previous challenges covered a lot about creating and composing JSX elements, functional components, and ES6 style class components in React. With this foundation, it’s time to look at another feature very common in React: props. In React, you can pass props, or properties, to child components. Say you have an App component which renders a child component called Welcome that is a stateless functional component. You can pass Welcome a user property by writing:

<App>
  <Welcome user='Mark' />
 </App>

You use custom HTML attributes that React provides support for to pass the property user to the component Welcome. Since Welcome is a stateless functional component, it has access to this value like so:

const Welcome = (props) => <h1>Hello, {props.user}!</h1>

It is standard to call this value props and when dealing with stateless functional components, you basically consider it as an argument to a function which returns JSX. You can access the value of the argument in the function body. With class components, you will see this is a little different.

Instructions: There is a Calendar and CurrentDate component in the code editor. When rendering CurrentDate from the Calendar component, pass in a property of date assigned to the current date from JavaScript’s Date object. Then access this prop in the CurrentDate component, showing its value within the p tags. Note that for prop values to be evaluated as JavaScript, they must be enclosed in curly brackets, for instance date={Date()}.

Leave a Reply

Your email address will not be published. Required fields are marked *


Warning: session_start(): Cannot start session when headers already sent in /homepages/45/d488136922/htdocs/fcc/wp-content/plugins/unyson/framework/helpers/class-fw-session.php on line 13

Warning: session_start(): Cannot start session when headers already sent in /homepages/45/d488136922/htdocs/fcc/wp-content/plugins/unyson/framework/helpers/class-fw-session.php on line 13

Warning: session_start(): Cannot start session when headers already sent in /homepages/45/d488136922/htdocs/fcc/wp-content/plugins/unyson/framework/helpers/class-fw-session.php on line 13