Error "Cannot read property 'fname' of undefined" in React state

Viewed 61

When I am console.log fullname it shows fname and lname, but when I access it as fullname.fname or fullname.lname in the component it throws "Cannot read property 'fname' of undefined".

I have defined fname and lname in useState. What's the problem? I cant find it. I have tried console.log at multiple places. It does not work.

      import React, { useState } from "react";
      function App() {
      const [fullname, setFullName]= useState({
      fname: "",
      lname: ""
      });
    
      console.log(fullname.fname);
    
    
      function Name(event){
        const newvalue = event.target.value;
        const newname = event.target.name;
    
        setFullName(prevValue => {
          console.log(prevValue);
          
          if(newname === "fname"){
            return {
              fname: newvalue,
              lname: prevValue.lname          
            }
          }else if(newname === "lname"){
            return {
              fname: prevValue.fname,
              lname: newvalue
            }
          }
        })
      }
      console.log(fullname.fname);
    
      return (
        <div className="container">
          <h1>Hello </h1>
          <form>
            <input 
            onChange={Name}
            // value={fullname.fname}
            name="fName" 
            placeholder="First Name" />
            <input
            onChange={Name} 
            // value={fullname.lname}
            name="lName" 
            placeholder="Last Name" />
            <button>Submit</button>
          </form>
        </div>
      );
    }
    export default App;
1 Answers

Your problem is here that you have named your inputs fName and lName, with capital N.

Your state has object keys of fname and lname

 const [fullname, setFullName]= useState({
  fname: "",
  lname: ""
  });

and in your Name function you are trying to match the name if it is fname or lname, without capital N.

const newname = event.target.name; // always going to be fName or Lname.

if(newname === "fname"){
    return {
        fname: newvalue,
        lname: prevValue.lname          
    }
}else if(newname === "lname"){
    return {
        fname: prevValue.fname,
        lname: newvalue
    }
}

Change the input names to fname and lname and it should work.

Related