React: Pass Props to a Stateless Functional Component

React: Pass Props to a Stateless Functional Component
0

#1

Tell us what’s happening:

This works fine, I got the tests to work. However, replacing line 6 with
<p>The current date is: {Date()} </p>

and line 21 with
<CurrentDate date='{this.props.date}'/>

Also works fine. Both passes the test and renders the desired result.
So I’m just confused a bit why this works.
I think it’s because I’m rendering Date() inside the CurrentDate component, which then gets rendered by the Calendar?

I think the way I did it is the correct one, set the prop inside the Parent element (Calendar) as a prop to the CurrentDate element in JSX and then do the {props.date} in the child element, right?

Just help me understand the logic please, because it works in both cases and I’m confused.

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 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.92 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/front-end-libraries/react/pass-props-to-a-stateless-functional-component/


#2

This is the way the challenge instructions want you to do it. Also, it is better for the date to be created in the parent component, because then it could also be passed to other components which might need to reference the same date.