Pass Props to a Stateless Functional Component

Pass Props to a Stateless Functional Component
0.0 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.