how to access property from usestate hook with json like object-CodePudding

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

CodePudding user response：

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>
  );
}

CodePudding user response：

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"}
                  ]
          } 
    ])