React Previous State -> What purpose does prevData Serve Here?

Question

Im going through some React tutorials using state and have encountered some code that I don't understand that I think relates to previous state when setting state in the React code.

import React, {useState} from 'react';

function LoginForm() {
  const [userData, setUserData] = useState({
  email: '',
  password: ''
  });

function emailEnteredHandler(event) {
  //Confused about prevData
  setUserData(prevData => ({
  email: event.target.value,
  password: prevData.password
  }));
};

function passwordEnteredHandler(event) {
  //Confused about prevData
  setUserData( prevData => ({ 
  email: prevData.email,
  password: event.target.value
  }));
};

return (
  <form>
    <input
    type="email"
    placeholder="Your email"
    onBlur={emailEnteredHandler} />
    
    <input
    type="password"
    placeholder="Your password"
    onBlur={passwordEnteredHandler} />
  </form>
  );
  };

    export function App(props) {
    return (
    <div className='App'>
    <LoginForm />
    </div>
    );
    }

What purpose does prevData serve in this example?

The tutorial indicates that this is for previous state, but in this example previous state doesn't seem to be addressed.

I have a working example here

I was experimenting with placing console.log statements in the code as shown here:

But that wasn't successful.

Thanks in advance

Answer 1

you can only check inside setUserData not outside of that.

it is a previous state if you useState() init with some value and then value you can access as a previous state, for example

const [text, setText] = useState('hello')
setText(prav => prav.concat('world'))
consle.log(text)// the text will be 'helloworld'

your given code. you can check this way to get output. what is going into it?

import React, { useState } from 'react';

function LoginForm() {
  const [userData, setUserData] = useState({
    email: '',
    password: '',
  });

  /*If any one input field is typed first another field will show empty because initial state sets are empty string It makes sense*/

  function emailEnteredHandler(event) {
    setUserData(prevData => {
      return {
        email: event.target.value,
        password: prevData.password,
      };
    });
  }

  function passwordEnteredHandler(event) {
    setUserData(prevData => {
      console.log('prevData email=' + prevData.email);
      return {
        email: prevData.email,
        password: event.target.value,
      };
    });
  }

  return (
    <form>
      <input
        type='email'
        placeholder='Your email'
        onBlur={emailEnteredHandler}
      />
      <input
        type='password'
        placeholder='Your password'
        onBlur={passwordEnteredHandler}
      />
    </form>
  );
}

export function App(props) {
  return (
    <div className='App'>
      <h1>Hello React.</h1>
      <h2>Start editing to see some magic happen!</h2>
      <LoginForm />
    </div>
  );
}