TypeError: Date.getFullYear is not a function on ReactJs

Question

I am trying to add a dynamic list to my Expanse List and am getting this error while doing it:

**TypeError: Date.getFullYear is not a function**

[TypeError: Date.getFullYear is not a function on ReactJs ][1]

but in a static list, it shows me the format as I wanted with no error.

This is a static list:

I am trying to update the list depending on user input.

Expanse.js

  return (
    <div>
      <Wrapper>
        <DateAndTitle>
          <ExpanseTime>
            <ExpanseDates Date={date} />
          </ExpanseTime>
          <Title>{title}</Title>
        </DateAndTitle>
        <Amount>{amount}$</Amount>
      </Wrapper>
    </div>
  );
};

ExpanseDate.js

  let month =Date.toLocaleString("en-US", { day: "2-digit" });
  let day = Date.toLocaleString("en-US", { month: "long" });
  let year = Date.getFullYear();


  return (
    <Wrapper>
     <ExpanseDays>{day}</ExpanseDays>
      <ExpanseMonth>{month}</ExpanseMonth>
      <ExpanseYear>{year}</ExpanseYear>

    </Wrapper>
  );
};

AddExpanse.js

This is User Input:

The is userInput code :

Answer 1

Edit:

You still haven't provided a reproducible example or all of the dependent code in your app, but now I think that you are passing a string to the Date property of your ExpanseDates component instead of an actual Date.

If you are using a date input to get a date value, you'll need to parse the value of the input into an actual JavaScript date object before passing it to that component:

function getDateFromInput (input) {
  const [y, m, d] = input.value.split('-').map(s => parseInt(s, 10));
  return new Date(y, m - 1, d);
}

function handleChange (ev) {
  const date = getDateFromInput(ev.target);
  // use the date: just logging it to console here
  console.log(date.toString());
}

document.querySelector('input[type="date"]').addEventListener('input', handleChange);

<input type="date" value="1999-12-31" />

---

The example you've shown is incomplete and can't be used to reproduce your error. However, here's a snippet which includes relevant portions in your question, demonstrating how to destructure a value from a component's props:

In the case of your code, the property's name happens to be Date, which is the same name as the builtin Date class in JavaScript and shadows it in the scope of the component. This is generally not a good practice: it's not a good idea to shadow built-ins.

Try renaming that prop in your ExpanseDates component to avoid ambiguity with the builtin Date.

<div id="root"></div><script src="https://unpkg.com/react@17.0.2/umd/react.development.js"></script><script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js"></script><script src="https://unpkg.com/@babel/standalone@7.16.4/babel.min.js"></script>
<script type="text/babel" data-type="module" data-presets="react">

function Component (props) {
  const {Date} = props;
  let day = Date.toLocaleString("en-US", { day: "2-digit" });
  let month = Date.toLocaleString("en-US", { month: "long" });
  let year = Date.getFullYear();
  return <div>{year} {month} {day}</div>;
}

function Example () {
  const date = new Date();
  return <Component Date={date} />;
}

ReactDOM.render(<Example />, document.getElementById('root'));

</script>