Pass Props to a Stateless Functional Component.SOLUTION

JavaScript
1

Tell us what’s happening:
The CurrentDate component should render the value from the date prop in the p tag.
This is wrong How I can do it?

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

Your browser information:

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

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

2

By convention, the parameter in a functional component is called props. Try renaming the date parameter to props first.

Then you can access the data stored in there using dot notation:

<p>The current date is: {props.date}</p>
3

<p>The current date is: {props.date}</p> I should write this code
?

4

Yes. Don’t forget to rename date to props in the very first line

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

This is my new code but tell me:
// running test
props is not defined
props is not defined
props is not defined
props is not defined
props is not defined
// tests completed

And all is wrong

6

You didn’t rename date to props in the first line of your code

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

I change it?

8

Only the first line should have been changed. So it should be

const CurrentDate = (props) => {

then

<CurrentDate date={Date()} />
9

Ohh thank you this is right.