Render value from function in component

Question

I have a component in React like this:

const myAge = () => {
  var diff = Date.now() - new Date(1991, 2, 1);
  var age = new Date(diff);
  return age;
};
export const About = (props) => {
  return (
      <Container id={props.id}>
         <p> My age is: {myAge}</p>
      </Container>
  )
}

I want the result of the function myAge to be returned and rendered in the p tag, but nothing is rendered. I don't know what I'm doing wrong, any suggestions? Ty.

I tryied that but this error happend: Error: Objects are not valid as a React child (found: Mon Jul 24 1995 16:02:22 GMT-0300 (hora estándar de Arg)). If you meant to render a collection of children, use an array instead. — iMSn20
– iMSn20, Commented Apr 11, 2021 at 22:03
React expects a string, and a Date is not a string, you can cast it by saying return String(age) or another way if you want to format it some specific way — Norse
– Norse, Commented Apr 11, 2021 at 22:04

Norse · Accepted Answer · 2021-04-11 22:07:27Z

3

You have to call the function, that is {myAge()} and then the new Date(diff) is not a string, so you have to cast it like this return String(age)

answered Apr 11, 2021 at 22:07

Norse

6488 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Render value from function in component

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related