How do I display data received from Async Storage in React Native?

Question

I'm trying to display data (in the form of an array) using async storage. Console logging the data works but when I put the data in state and try to map through it to display, it wont. Any help is welcome. Thanks! Result in console log: ["team1", "team2", "team3"] before JSON.parse Array [ "team1", "team2", "team3", ] after JSON.parse

const [favoriteTeams, setFavoriteTeams] = useState([]);

const setStorage = async (team) => {
    let teams = [];
    try {
      let storedTeams = await AsyncStorage.getItem('favTeams');
      if (storedTeams !== null) {
        teams = JSON.parse(storedTeams); 
      }
      teams.push(team)
      await AsyncStorage.setItem('favTeams', JSON.stringify(teams));
    } catch (error) {
      //error
    }
};

const getStorage = async () => {
    const teams = await AsyncStorage.getItem('favTeams')
    if (teams !== null) {
        setFavoriteTeams(prevState => [...prevState, ...JSON.parse(teams)])
    }
}

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

return (
    <View>
         {favoriteTeams.map((item) => {(
              <Text>{item}</Text> //console.log(item) works
          )}
       )}
    </View>
)

Can you please add the data you get from `AsyncStorage.getItem`? — Rohit Aggarwal, Nov 22 '21 at 13:45
`["team1", "team2", "team3"]` before JSON.parse `Array [ "team1", "team2", "team3", ]` after JSON.parse — Torando1, Nov 22 '21 at 14:00

3limin4t0r · Accepted Answer · 2021-11-22T18:22:28.437

Your map callback function doesn't have a return value, which is why none of the contents show up.

You should either remove the curly brackets or add an explicit return. By removing the curly brackets your arrow function implicitly returns a single expression.

return (
  <View>
    {favoriteTeams.map((item) => (
      <Text>{item}</Text>
    ))}
  </View>
)

Alternatively you could keep the curly brackets, in which case you must explicitly return a value. The advantage of curly brackets is that you can have multiple statements in the function body. Whereas without them you can only have a single expression.

return (
  <View>
    {favoriteTeams.map((item) => {
      return <Text>{item}</Text>
    })}
  </View>
)

For details see: Arrow function expressions - Function body and Arrow function without curly braces

How do I display data received from Async Storage in React Native?

1 Answers1