Pass Props to a Stateless Functional Component

what’s happening:

The CurrentDate component should render the value from the date prop in the p tag.
I can’t understand this sentence, i try many times and searched in google but what i have found only this:
Link: https://stackoverflow.com/questions/41813165/passing-accessing-props-in-stateless-child-component

Any one explain to me and give me a solution because i am pinned out from 2 hours.

Regards,
Ali Mosaad

My code so far


const CurrentDate = (date) => {
  return (
    <div>
      { /* change code below this line */ }
      <p>The current date is: </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>
    );
  }
};

My browser information:

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

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

1 Like

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:

  1. 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”.

  1. 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.

3 Likes

Hi @kevinSmith,

Thank you very much for the great explnation , may God reward you and have a nice great day.

Regards,
Ali Mosaad

1 Like

Can you check what is wrong with my Code ?

const CurrentDate = (props) => {

  return (
    <div>

      <p>The current date is: {props.date}!</p>
    </div>
  );
  
};
class Calendar extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div>

        <CurrentDate date="date"/>

      </div>
    );
  }
};

ERROR MESSAGE : The CurrentDate component should render the value from the date prop in the p tag.

Hi @harisNT,

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.

Regards,
Ali Mosaad

6 Likes

solution

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>
    );
  }
};
1 Like

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):

  1. 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()}.
  2. The date/time is placed into the variable date.
  3. 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()}/>
1 Like

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>
    );
  }
};

So, this worked, but I don’t think it’s the answer FCC was looking for. Why did it work?


const CurrentDate = (props) => {
  props.date = Date();
  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 />
        { /* change code above this line */ }
      </div>
    );
  }
};

Thanks, I see now. When I went back and adjusted the code I was also calling the prop on the wrong side of ‘/>’. That little detail’s easy to miss.

we have tried many thing from given above but found error and then try with other solutions list here and will sort-out my query.