Calculate age from date of birth user input value in react

Question

I am trying to fetch user input date of birth value and convert to its equivalent age.

In the console showing the fetched value, but its not assigned to state variable dob1, struck with age calculation function execution.

The entire code is available in the stackblitz and it's link: https://stackblitz.com/edit/react-geum6v?file=index.js

HTML

Number of male over certain age: <input type="date" name="date_of_birth" defaultValue= {dob1} onChange={this.handleChange_age}></input> <br /><br />

JS

handleChange_age = (event) => {
    console.log("DOB:", event.target.value);

    this.setState({ dob1: event.target.value })
    console.log(this.state.dob1);
    var age_latest = {age_latest: this.calculate_age}
    console.log(age_latest);

    this.setState({ age1: age_latest })
    console.log("Age:", this.state.age1);
  }

calculate_age = (dob1) => {
    var today = new Date();
    var birthDate = new Date(this.state.dob1);
    var age_now = today.getFullYear() - birthDate.getFullYear();
    var m = today.getMonth() - birthDate.getMonth();
    if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) 
    {
        age_now--;
    }
    console.log(age_now);
    return age_now;
  }

Answer 1

Firstly, setState is asynchronous in nature. So if you want to have the newly set state's value to do something, use the callback argument of setState.

Secondly, calculate_age takes a dob argument. You can use that directly inside your handleChange_age function.

Here is the modified code.

Your calculate_age function uses dob1 argument instead of this.state.dob1:

calculate_age = (dob1) => {
    var today = new Date();
    var birthDate = new Date(dob1);  // create a date object directly from `dob1` argument
    var age_now = today.getFullYear() - birthDate.getFullYear();
    var m = today.getMonth() - birthDate.getMonth();
    if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) 
    {
        age_now--;
    }
    console.log(age_now);
    return age_now;
  }

Your handleChange_age now calls this.calculate_age with event.target.value:

handleChange_age = (event) => {
    console.log("DOB:", event.target.value);

    this.setState({ dob1: event.target.value }, () => {
      // example of setState callback
      // this will have the latest this.state.dob1
      console.log(this.state.dob1);
    })

    // call calculate_age with event.target.value
    var age_latest = {age_latest: this.calculate_age(event.target.value)}
    console.log(age_latest);

    this.setState({ age1: age_latest }, () => {
      // this will have the latest this.state.age1
      console.log("Age:", this.state.age1);
    })
  }

Answer 2

Another calculate_age for some reason mehamasum's function is not working for me

const calculate_age = dob => {
  const birthDate = new Date(dob); 
  const difference = Date.now() - birthDate.getTime();
  const age = new Date(difference);

  return Math.abs(age.getUTCFullYear() - 1970);
}