Passing a date object to the CurrentDate Component?

JavaScript
1

How do I pass a date object to the CurrentDate component? Is what I have now at least close?

And then when passing it to <CurrentDate />, do I just do <CurrentDate date="date" /> or something like that?

My code so far


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/84.0.4147.105 Safari/537.36 Edg/84.0.522.52.

Challenge: Pass Props to a Stateless Functional Component

Link to the challenge:

2

date = new Date()

and

props.date

I let you find how the context…

3

How do I do it in here?

const CurrentDate = (props) => {
  return (
    <div>
      { /* change code below this line */ }
      <p>The current date is: {Date()}</p>
      { /* change code above this line */ }
    </div>
  );
};

When I try to do {new Date()}, I get an error in the console. And just doing {Date()} gives me the string Thu Aug 06 2020 02:56:45 GMT+0500 (Pakistan Standard Time). How do I get the just the date? I tried calling the functions from Date, but that also gave errors.

This is what I have for Calendar right now:

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

Hey, yes, the new keyword bit is wrong.

It should be date = {Date()}
And the rest the same.

If you want to get just part of the string, look into Date() object in MDN. It’s very simple. Something like Date().getDay or so.

I didn’t know you couldn’t use the new Date(). Maybe someone wants to expand on this. I’ve found out you can use new Date().toString() though.

Edit

Please, don’t expect straight answers, it’s even easier but it’s better for you to go step by step and finding out on your own.

Edit2

We can’t use new Date() cause it returns an object.
Date() instead, returns a string.
new Date().toString() sould be accepted by the algorithm imho.

5

This is what I have now:

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={new Date().getDate()}/>
        { /* change code above this line */ }
      </div>
    );
  }
};

And with this I get The current date is: 6. What do I get the full date? When I put just new Date(), I get a completely blank page in the output.

6

I’m afraid the exercise needs you to remove the new keyword. Please, read what I’m writing, that’s exactly what I’ve told you…

It should be date = {Date()}

If you want to get the number for any reason, just call the function over the object as you did. Like so: Date().function()

7

When I take out new, I get a blank output unless I leave only {Date()}. I can’t call Date methods.

Edit: Note: When I do:

date={Date().getDate()

I get this error:

Build error, open your browser console to learn more.
8

Alright, maybe something else is going on there.

So I’d say, paste this:

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

If it passes the exercise, then you can take a look at it. If it doesnt, and if you get the same error, press CTRL+SHIFT+K and check what’s the error.

9

That didn’t work either. The error in the console is basically “Date(…).getDate() is not a function”. Says the same thing for Date.getDate().

10

But yeah, to pass the challenge, I just had to do date={Date()}. I’m still curious as to how I can get the getDate version to work though. Even if it wouldn’t pass the challenge.

11

I see. It’s a good thing then, as you’ll get more insight by testing this. I will give you some hints. But you should be confindent and find out the rest for yourself.

Try this code…

const CurrentDate = (props) => {
  var months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
  return (
    <div>
      { /* change code below this line */ }
      <p>The current date is: day: {props.date.getDate()}</p>
      <p> The current year is {props.date.getFullYear()}
      </p>
            <p> The current month is {months[props.date.getMonth()]}
      </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={new Date}/>
        { /* change code above this line */ }
      </div>
    );
  }
};
12

I was still wondering why this was so difficult, then I found an instance method for Date(), to get it exactly as you asked for.

And to avoid cluttering this thread with code, I set up a codepen for you.