React - Pass Props to a Stateless Functional Component

JavaScript
1

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:

3

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:

4

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

5

you’re not passing anything to the attribute.

6

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

1 Like
8

Got it gentleman, Thanks😊

9

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