Question About: Pass Props to a Stateless Functional Component (React)

JavaScript
1

I’m getting multiple solutions correct in this challenge. I’ve seen some people use props.date and I haven’t used that. Am I missing something?

const CurrentDate = (props) => {
  return (
    <div>
      { /* change code below this line */ }
      <p>The current date is: {Date()}</p>       //Is this line correct?
      { /* 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"/>               //Is this line correct?
        { /* change code above this line */ }
      </div>
    );
  }
};
2

This is a challenge bug. The intent is to pass Date() to the <CurrentDate> component, then retrieve the data via its props.

3

Ah, I figured…

Would you mind showing me how that will look? I tried going back over the example presented in the reading portion, but it doesn’t really show how it’s supposed to be done.

4

I think I found it?

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

Though I would argue that the CurrentDate component should generate the date itself instead of receiving it as props. The name itself implies that it presents the current date on its own.

1 Like
6

Right that was my initial solution, by using:

<p>The current date is: {Date()}</p>
7

This bug has been resolved and we are just waiting for the master branch to be deployed to production.

2 Likes