Why? Pass Props to a Stateless Functional Component

Tell us what’s happening:
My code is working fine. But I don’t understand. Why would the Date() function get called in the return statement of the Calendar class instead of defining it when create the CurrentDate const.

I’m used to vanilla javascript where if I wanted something to happen in a function, I put it in the function when I first define it.

Any good references to help me wrap my mind around this?

  **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={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/93.0.4577.82 Safari/537.36

Challenge: Pass Props to a Stateless Functional Component

Link to the challenge:

If I understand your question, then I would kind of agree. It’s kind of an odd little problem.

Why wouldn’t you define it within the CurrentDate component? The name implies that it always wants the current date so why not let that component get it?

This would make more sense to me if that component were more generic like, DateDisplay and you want to pass in the date object because you might want it to display different dates on different parts of the page.

Don’t worry about it too much. Just understand how it works and don’t worry about if it makes sense in a real world application too much.

Does that help?

I guess it depends on what you think of the CurrentDate component as being. If you see it as a purely presentational component that is only responsible for the layout then passing it all data it needs and leaving it stateless might make more sense.

Although it does seem like Container and Presentational components are a bit of a leftover from earlier days of React (read the update to this article Presentational and Container Components)

Yeah, I did a little Presentational and Component. In practice I probably wouldn’t be concerned about a presentational component getting it’s own date - it’s so simple - but that would make it non-pure so I guess you could build an argument against it. Of course the FCC materials don’t really talk about the P/C model and don’t talk about it needing to be a pure function, so that just looks a little odd to me. But I think when you learn these things you have to realize that some of the examples are going to have to be a little impractical.

the purpose of the challenge is to show the learner how data can be passed from a parent to a child component, how it can be accessed etc. There isnt additional subtle reason(afaik) nore it aims to give the most practical example

Yeah, I get that, I just agree with the OP that it is a little puzzling for a parent to pass to a child something that the child could easily get itself. If it were a more generalized component that would be different, but that component (based on its name) seems like it will always want the same data. I’m not saying it’s “wrong” per se, but seems a little odd to me. You’re right that it does show how to do what is intended to be shown, I just would have wanted to choose an example that “made more sense”.

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