Cannot read properties of undefined (reading 'name'): ReactJs

Question

I have data in my console when I try to log it but I am not able to use it .

My data object looks like :

{_id: '616bf82d16a2951e53f10da4', name: 'abd', email: '[email protected]', phone: '1234567890', work: 'singer', …}

accessToken: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjYxNmJmODJkMTZhMjk1MWU1M2YxMGRhNCIsImlhdCI6MTYzNDYyMDk3MiwiZXhwIjoxNjM1MDUyOTcyfQ.b9NZB-ogrdu_SulT1xJ8h62aHdyAo2jzTny2qakeaHY"

cpassword: "$2a$12$BZ17rY63qrq.Fw9wC29A.eabcuAHSY0mXfxSvcpxOFGfUeW4NUkMO"

email: "[email protected]"

name: "abd"

phone: "1234567890"

tokens: (3) [{…}, {…}, {…}]

work: "singer"

__v: 3

_id: "616bf82d16a2951e53f10da4"

[[Prototype]]: Object

import "./about.css"
import {useHistory} from "react-router-dom"


export default function About() {
    const history=useHistory();
    const [userData,setUserData]=useState();
    const callAboutPage=async()=>{
        try {
            const res=await fetch("/about",{
                method:"GET",
                headers:{
                    Accept:"application/json",
                    "Content-Type":"application/json"
                },
                credentials:"include"
            })
            const data=await res.json();
            console.log(data);
            setUserData(data);

            if(!res.status===200){
               const error=new Error (res.error)
               throw error
            }
            
        } catch (error) {
            console.log(error)
            history.push("/login")
        }
    }
    
  useEffect(() => {
     callAboutPage();
  }, [])

    return (
        <div className="abt-body">
            <div className=" d-flex justify-content-center align-items-center about">
                
                Name:{userData.name}
                <br />
                Id:{userData._id}
                <br />
                Email:{userData.email}
                <br />
                Phone:{userData.phone}
                <br />
                Work:{userData.work}
             
                

                

            </div>
           

                <div class="card-footer text-muted d-flex justify-content-center align-items-center">
    Designed and Developed by : Harsh Raj Ambastha
  </div>
        </div>
    )
}

Including personal information in a question that can be read by thousands of people is not good. — Andy
– Andy, Commented Oct 19, 2021 at 5:34

Jonathan · Accepted Answer · 2021-10-19 05:31:55Z

1

You might try using Javascript optional chaining: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining

Try adding the operator to each of your fields:

userData?.name
userData?._id

etc.

answered Oct 19, 2021 at 5:31

Jonathan

1232 silver badges12 bronze badges

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

Comments

user4546364 · Accepted Answer · 2021-10-19 06:01:14Z

0

It is because you set initial value as empty which will be interpreted as primitive value. So when it renders initially it finds you are trying to access a property of a primitive value which ain't there. Give initial value as an empty object, it will then no longer throw an error here. useState({})

answered Oct 19, 2021 at 6:01

user4546364

4 Comments

Harsh Raj Ambastha Over a year ago

Thanks ,it worked for that error ,but still I am not able to render it on my dom. I tried to find out why this is happening ,when after setting the data I tried to log userData.name on console it is still showing undefined .Any solutions for it? Thanks in advance:)

user4546364 Over a year ago

Where are you using console.log(userData.name). If you can set this up in codesandbox, then provide the link. I can check it out

Harsh Raj Ambastha Over a year ago

Changes which I made:const [userData,setUserData]=useState( {_id: "", name: "", email: "", phone: "", work: ""}); const data=await res.json(); setUserData(data);[HERE I DID LOG]console.log(userData.name)

user4546364 Over a year ago

useState() is like a await operation. It does not update your state immediately. so here is one thing to check that if you have value in console.log(data). If you have value in data, then you should try useState in separate value rather than in an object. Like const [name,setName], [email,setEmail] etc. Then set them separately.

Collectives™ on Stack Overflow

Cannot read properties of undefined (reading 'name'): ReactJs

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related