CODEWITHSUNDEEP
react-nativesetstate
SKeney
SKeney

Reputation: 2301

React Native setState with objects

Let's say I have a functional component called Profile Screen i.e. below:

const ProfileScreen = props => {
    const { token, user } = useSelector(state => state.auth);
    const [userData, setUserData] = useState({});

    let userValidatedInfo = validatedUserInfo(user);
    setUserData({...userValidatedInfo});

    return <Text>{userData.fullName}</Text>
}

When I go to access one of the properties of the object userData in a <Text>{userData.fullName}</Text>i.e. userData.fullName it says it is undefined. What am I doing wrong with my setState call (setUserData) that it is not updating the current userData state

If I console.log userValidatedInfo before the setUserData call, I get the following:

Object {
    "fullName": "Person's name",
    //... more properties
}

Upvotes: 1

Views: 76

Answers (2)

Anurodh Singh
Anurodh Singh

Reputation: 812

I think you are directly using userData.fullName in your Text component. When the component is rendering for the first time before setUserData the userData is empty.

So, you can try it like this,

{userData.fullName && <Text>{userData.fullName}</Text>}

Upvotes: 0

ridvanaltun
ridvanaltun

Reputation: 3020

I assume validatedUserInfo is a normal -sync- function, it must be async. Your code seems fine except validatedUserInfo.

See more information about async in javascript here.

Upvotes: 1

Related Questions