Pass Props to a Stateless Functional Component helppp

JavaScript
1

Why use props.date i did not understand this challenge

Your code so far



const CurrentDate = (props) => {
  return (
    <div>
      { /* change code below this line */ }
      <p>The current date is:{props.date} </p>
      { /* change code above this line */ }
    </div>
  );
};

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

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.102 Safari/537.36.

Link to the challenge:

2

So your component is called like this:

<CurrentDate date={Date()} />

That isn’t HTML, it’s an instruction to create an object that looks a bit like this (this is a massive simplification, but hopefully you can see a bit clearer):

CurrentDate = {
  props: {
    date: Date()
  }
}

The CurrentDate function is going to create that, and you access that date property under props.date. If you added more props, like:

<CurrentDate date={Date()} message={'Hello!'} title={'I\'m a date!'} />

All of those props would be accessible in the component like props.date, props.message, props.title, going back to the object, a bit like:

CurrentDate = {
  props: {
    date: Date(),
    message: 'Hello!',
    title: 'I\'m a date!',
  }
}
2 Likes