React: Pass Props to a Stateless Functional Component

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/