OK, the Calendar component is now passing in date to the component CurrentDate - you did that properly on line 21. Good job, now that’s the first half of the problem. Here is the second half:
The CurrentDate component should render the value from the date prop in the p tag.
So, CurrentDate is getting an object. Usually we call it “props”. That date that you defined is now a property of that object. So, you need to do two things:
Change the variable name to match the convention:
const CurrentDate = (date) => {
should be changed. Don’t call the object “date” - there could be more than one thing you send it. Change the name of the parameter to “props”.
You need to render that in the p tag, clearly at the end:
<p>The current date is: </p>
So, in this function you now have an object called props with a property date, or props.date. Do you know how to render a JS variable in the JSX? I assume you’ve done it before.
Please let us know if this is insufficient information.
Your problem is in the Calendar component, you don’t use the Date() function which is important to get to date.
So you will going to <CurrentDate date="date"/> and change the "date" to function of Date(),but don’t forget when you put the Date() function you should put it between brackets like this {Date()} .
Hope this help you to solve the example, good luck and have a happy coding.
Why does this solution work? I thought that we were required to use quotes rather curly braces. Plus I thought the date object requires the new keyword.
I am trying to understand conceptually how this works. See Code Reference below. Please correct me if I’m wrong.
Starting from line 2 (of my Code Reference below):
The Date() function is built into javascript, which we use to give us the date/time.
1b. To invoke the Date() function, we use this syntax: {Date()}.
The date/time is placed into the variable date.
The variable date is placed into the const CurrentDate into the “props” argument.
From Line 1 (of my Code Reference below):
4. In React syntax, to print the date/time variable, use {props.date}. This improves the passing of variables so that you have two references (props.date) to double-check the passing of variables into the function. You can double-check your variable by looking at the top of the function construction (props) and also in your class where date is written.
Does that sound about right?
Code Reference:
The current date is:{props.date}
<CurrentDate date={Date()}/>
Would you tell me if this could work, too? If not mention about following the instruction.
I got the same result but not sure if it’s not good to do this way.
Thank you
const CurrentDate = (props) => {
return (
<div>
{ /* change code below this line */ }
<p>The current date is: {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 />
{ /* change code above this line */ }
</div>
);
}
};