I am getting error "Cannot read property 'fname' of undefined"

html dont have any code just importing this code

  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;

When I am console.log fullname the it shows fname and lname but when i use it as fullname.fname or fullname.lname it sows error. 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

2 thoughts on “I am getting error "Cannot read property 'fname' of undefined"”

  1. 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.

    Reply
  2. In this function, you only handle the case when newname=== "fname" and newname=== "lname". Try to return fullname when other cases occured. Therefore, fullname do have valid values no matter what.

    
    setFullName(prevValue => {
                console.log(prevValue);
    
                if (newname === "fname") {
                    return {
                        fname: newvalue,
                        lname: prevValue.lname
                    }
                } else if (newname === "lname") {
                    return {
                        fname: prevValue.fname,
                        lname: newvalue
                    }
                }else{
                    return fullname
                }
    
            })
    
    Reply

Leave a Comment