Providing the prop function in a component

JavaScript
1

I want to add this line in somewhere.

const CurrentDate = (props) => <div>{props.date}</div>;

Any tips for where to look to learn how to set a property in a stateless functional component? This code returns the desired output but a prop was never set.


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

  **Your browser information:**

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

Challenge: Pass Props to a Stateless Functional Component

Link to the challenge:

2

I think you should follow the directions exactly as written:

  1. When rendering CurrentDate from the Calendar component, pass in a property of date assigned to the current date from JavaScript’s Date object.

  2. Then access this prop in the CurrentDate component, showing its value within the p tags.

That’s what the tests are expecting and that’s how you will pass the challenge. You can do this only by editing the parts of the code where it tells you to. Do you know how to pass a prop to CurrentDate? The last sentence in the instructions is basically telling you how to do it.

4

This also did not work.


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

I saw someone else’s solution for more relevance than documentation, I returned to a simpler explanation of props from W3 Schools. The parent will hold the value of an attribute, allowing the child to use that version. The child runs since its React component is rendered in the parent.

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

It would have been helpful to read more explanations in vernacular hours ago. I am ready for a break.

5

I have added spoiler tags around your full working solution for those who have not worked on the challenge yet.

6

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.