freeCodeCamp/guide/english/certifications/front-end-libraries/react/pass-props-to-a-stateless-functional-component/index.md

title

title
Pass Props to a Stateless Functional Component

Pass Props to a Stateless Functional Component

---

Hints

Hint 1

Define a prop named date in the Calendar component as follows:

<CurrentDate date={Date()} />

Hint 2

The syntax prop.propName is used to render a prop.

---

Solutions

Solution 1 (Click to Show/Hide)

Assign a prop named date in the Calendar component as follows and render it in the Calendar component, like:

const CurrentDate = (props) => {
  return (
    <div>
      <p>The current date is: {props.date}</p>
    </div>
  );
};

class Calendar extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div>
        <h3>What date is it?</h3>
        <CurrentDate date={Date()} />
      </div>
    );
  }
};