Question 33769 in React native Question posted in
The official React Native documentation can be found here.

how to access property from usestate hook with json like object – React native

i kinda new in react native. i want to make function that show cards with just feeding them list. for testing, i use usestate.it meant to be json. but somehow i cant access the property on the object.

 const [data,setData]= useState([
        {ob1:[  {key:'1b',value:true,text:'data'},
                {key:'2b',value:true,text:'data'},
                {key:'3b',value:true,text:'data'},
                {key:'4b',value:true,text:'data'},
        ]},
        {ob3:[  {key:'1b',value:true,text:'data'},
            {key:'2b',value:true,text:'data'},
            {key:'3b',value:true,text:'data'},
            {key:'4b',value:true,text:'data'},
        ]}
    ])

    const Show =()=>{
        
        return(
            <View style={{flex:1, flexDirection:'row'}}>
                {Object.entries(data).map(([key,value])=>(
                    <Grid_ver color={'yellow'}>
                        <Grid_hor id={value.ob1.key} color={'yellow'}>
                           //some <Text>

                        </Grid_hor>
                    </Grid_ver>
                ))}
            </View>
        )
    }

on the function Show(), Object.entries(data) just doing fine. but i cant access value to use in <Grid_hor>.
somehow i got snipset like this.

const data: ({
    ob1: {
        key: string;
        value: boolean;
        text: string;
    }[];
    ob3?: undefined;
} | {
    ob3: {
        key: string;
        value: boolean;
        text: string;
    }[];
    ob1?: undefined;
})[]

i tried Object.entries(data.ob1), Object.entries(data[0]), but still cant access the property.

i really glad if anyone give me some tips. hehe… thanks…

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    i post the answer for who face the same problem. so, maybe json have very strict rule for bracket and quote. i like to use single quote. but unfortunately i have to use double quote. Here the solution...

    const [data,setDat]= useState([
        {
            "ob1":
                  [
                    { "key":"1a", "value":"true","text":"data"},
                    { "key":"2a", "value":"true","text":"data"},
                    { "key":"3a", "value":"true","text":"data"},
                    { "key":"4a", "value":"true","text":"data"}
                  ],
            "ob3":
                  [
                    { "key":"1b", "value":"true","text":"data"},
                    { "key":"2b", "value":"true","text":"data"},
                    { "key":"3b", "value":"true","text":"data"},
                    { "key":"4b", "value":"true","text":"data"}
                  ]
          } 
    ])

  2. 0

    You need to check for existence of data.obj1 and data.obj3 first because the keys are not guaranteed to exist based on the JSON you wrote. You can check for truthiness and then access as normal:

    if (data.obj1 != null) {
  return (
    <Grid_hor>obj1 exists! key: {data.obj1.key}</Grid_hor>
  );
}

if (data.obj3 != null) {
  return (
    <Grid_hor>obj3 exists! key: {data.obj3.key}</Grid_hor>
  );
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search