React - Pass Props to a Stateless Functional Component

Tell us what’s happening:
Describe your issue in detail here.
What else I need to do?

  **Your code so far**
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 />
      { /* 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/103.0.0.0 Safari/537.36

Challenge: React - Pass Props to a Stateless Functional Component

Link to the challenge:

What is date? Where did you define what it is?

Hey! This is the task you’re expected to do in this challenge.

image

props or properties in react js is a way for you to send any additional data from a parent component to any child component in your app. You can think of them as attributes and values that you pass to any html element.

<img src="https://somerandomsource.com" />

here, the src is an attribute that is required for the HTML img element to work correctly. but in react if you’re able to create your own components then its safe to assume that to pass data to those components, you should have a similar mechanism.

In this example, the challenge is asking you to provide value to an attribute with the help of built in Date object. If you call this Object like Date() it will return the current date which you can pass to the prop.

Hope this helps! :smile:

Date is a property that I have to pass in the current date component.

you’re not passing anything to the attribute.

Yeah, that 's where I was lacking. I was missing this {Date()}…, thanks for your help.

1 Like

You must assign a value to date so that it can be passed to the CurrentDate component. The instructions show you how to do just that.

1 Like

Got it gentleman, Thanks😊