The CurrentDate component should render the value from the date prop in the p tag

Tell us what’s happening:

The current date is:

************** this particular line is my issue!

Your code so far


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

  </div>
);
};

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

Your browser information:

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

Challenge: Pass Props to a Stateless Functional Component

Link to the challenge:

1 Like

So, in your function above, you have a parameter, date - but is that what your component will get? It receives an object, which is often referred to (by convention) as props. In this case, if you had used the convention, you could do:

 // suppose I'd had `<Nametag myName="Clark Kent" />`

const Nametag = (props) => {
  return (
    <div> <p>My name is: {props.myName}</p> </div> 
  );
};

or, if I wanted to be able to deconstruct my property by name:

 // suppose I'd had `<Nametag myName="Clark Kent" />`

// Here, I use object deconstruction to get the one prop I want
const Nametag = ({myName}) => {
  return (
    <div> <p>My name is: {myName}</p> </div> 
  );
};
1 Like

Thank you sir,really appreciate.

did that take care of it?

not really sir.

The current date is: {CurrentDate}

......this is my trial.

Did you deconstruct the date property from the props object? You need to get at that somehow.

const CurrentDate=(props)=>{
return(


The current date is:{props.date}



};
this is what i was suppose to do initially.
Thank you once again,you’ve been helpful.
1 Like

That is exactly right, though in the Javascript Algorithms\ES6 section (https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/es6/use-destructuring-assignment-to-pass-an-object-as-a-functions-parameters) you learned about object deconstruction. Using that, we can change that first line from

const CurrentDate = (props) => {

to

const CurrentDate = ({date} /*Use deconstruction to get the one prop we want */ ) => {
1 Like