Pass Props to a Stateless Functional Component

Pass Props to a Stateless Functional Component
0

#1

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


#2

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

Hi @kevinSmith,

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

Regards,
Ali Mosaad


#5

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.


#6

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


#7

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

#8

Your code has been blurred out to avoid spoiling a full working solution for other campers who may not yet want to see a complete solution. In the future, if you post a full passing solution to a, please surround it with [spoiler] and [/spoiler] tags on the line above and below your solution code. In this case, there was no need to post a solution, because the OP marked the topic as “Solved”, which means the OP solved it without seeing the full working solution.

It is always better to give others hints and suggestions instead of the solution, so they can solve most of the challenge by themselves.

Thank you.


#9

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.


#10

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()}/>

#11

The above would be more correct if stated as follows:

  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.

The curly brackets around Date() are required because you are using JavaScript inside the component in order to pass the value returned from the Date function to the date prop.


#12

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

#13

You are not following what the challenge instructions intended for you to do, which is the date as a prop to the Stateless Functional Component (SFC). With what you have written, Calendar could be an SFC too.


#14

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

#15

You missed the point of the challenge. You are supposed to pas a prop named date which has been assigned to the current data from JavaScript’s Date object. Instead, you passed no prop at all and inside the CurrentData SFC, you created a property named date on the props object and assigned in the current date via the Data object.

If you read the example in the challenge, they show you how to pass a prop named user which has been assigned the value 'Mark" to the Welcome component (and SFC). See below for how that was accomplished.

<App>
  <Welcome user='Mark' />
</App>

The user reference above is the prop and ‘Mark’ is the value assigned to the prop. Then inside the Welcome component (seen below), props.user is reference to get the ‘Mark’ value to render in the h1 element.

const Welcome = (props) => <h1>Hello, {props.user}!</h1>

#16

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.