Json.parse not returning correctly (React Native)

Question

I'm practicing SecureStore in expo with a test project. It's console logging the array with the objects after I restart the app but it wont setObjects(parsed) - instead I get a error "Objects are not valid as a React child (found:object with keys {title,age}). If you meant to render a collection of children, use an array instead. "

I feel like I just missed a syntax thing somewhere, but I can't seem to find where I went wrong, can someone help me correct this?

const  [name, setName] = useState()
const  [object, setObject] = useState([])

const save = async() => {
  try {
    const jsonValue =  JSON.stringify([{title:name, age:20}])
    await SecureStore.setItemAsync("MyName", jsonValue)
    setObject(jsonValue)
  }catch (err) {alert(err)}
}

const load = async() => {
  try {
   const jsonValue = await SecureStore.getItemAsync("MyName")
   const parsed = JSON.parse(jsonValue)
   if(name !== null) {
    console.log(parsed)
    setObject(parsed)
  }

  }catch (err) {alert(err)}
}

useEffect(()=> {
  load()
},[])


  return(
    <View style={{flex:1, backgroundColor:"beige", alignItems: "center", justifyContent: "center"}}>
      <Text>Enter something here</Text>
      <TextInput
      style={{backgroundColor: "grey", width:300, height: 50, paddingHorizontal: 30,}}
      onChangeText={text => setName(text)}

      />
      <Button title="save" onPress={()=>save()}/>
      <Text>{name}</Text>
      <Text>{object}</Text>
    </View>
  )
}

Fiston Emmanuel · Accepted Answer · 2022-02-01 10:36:44Z

1

You're trying to render object inside <Text>. Replace <Text>{object}</Text> with <Text>{object?.title}</Text>

answered Feb 1, 2022 at 10:36

Fiston Emmanuel

4,9611 gold badge11 silver badges17 bronze badges

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

4 Comments

Ollie Over a year ago

Ah thank you, I tried but it's still not working

Fiston Emmanuel Over a year ago

Try <Text>{object[0]?.title}</Text>

Ollie Over a year ago

What does the question mark mean/do that you added?

Fiston Emmanuel Over a year ago

When you're accessing object property, sometimes the object is null or undefined which results in an error or a crash app in production. The question mark tells compile to access object key or property when is defined otherwise do nothing.

Collectives™ on Stack Overflow

Json.parse not returning correctly (React Native)

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related