How to store JSON items in state in React Native

Question

I've been having some confusion with react native, and I'm hoping the community can help clear it up. I'm attempting to receive a list of some number of announcements from an API, and display each announcement in a flatlist.

I can receive and parse the JSON, I can display Items that are coded in state, but I'm having trouble storing JSON data in state.

So the question is this: How can I store data received as a JSON from an API, in state in react native?

This is my code (which I tried to trim, there may be some jank in there, sorry about that)

import { StatusBar } from 'expo-status-bar';
import * as React from 'react';
import { useState } from 'react';
import { FlatList, Text, View, StyleSheet, TouchableOpacity, Image } from 'react-native';
import { createDrawerNavigator } from '@react-navigation/drawer';

import Announcement from '../components/Announcement';
import BottomBar from '../components/BottomBar';
import TopBar from '../components/TopBar';

state = {
    data: [
        {title: 'This is a title', text:'yadda yadda'},
        {title: 'yup, still a title', text:'blah blah blah'},
        {title: 'tidal', text:'Lots and lots of details'}
    ],
}

function AnnouncementsScreen(props) {

    //const [count, setCount] = useState(0);
    
    
    

    fetch('https://eo9260z47k.execute-api.us-east-2.amazonaws.com/default/getAnnouncements', {
        method: 'GET',
        headers: {
            // Accept: 'application/json',
            'x-api-key': 'kezCnfAATA2cs6bHh39sg4IEXvPkfnaM220seEk2',
            'Content-Type': 'application/json',
        },       
    })
    .then((response) => response.json())
    .then((responseJson) => {

        //This was a bit of a failed attempt
        //setCount(responseJson.toString())
        //console.log("state: " + state)


        
        

    })
    .catch((error) => {
        console.error(error);
    });





    return (
        <View style={styles.background}>
            <View style={styles.mainContent}>
                <View style = {styles.announcementsWrapper}>
                <Text style = {styles.sectionTitle}>Announcements</Text> 
                    
                    <View style = {styles.announcementList}>
   
                        <FlatList
                            data = {state.data}
                            keyExtractor={(x, i) => i.toString()}
                            renderItem={({item}) => <Announcement  title = {item.title} text = {item.text}/>}
                        />
                    </View>
                </View>
            </View>
        </View>

        

    );
}
export default AnnouncementsScreen;


const Drawer = createDrawerNavigator();

const styles = StyleSheet.create({
    background:{
        flex: 1,
        backgroundColor: '#2d0f4c',
        alignItems: 'flex-start',
        justifyContent: 'flex-start',
    },
    announcementsWrapper : {
        paddingTop: 20,
        paddingHorizontal:20,
    },
    announcementList:{
        color: '#f1cf5b',
        fontSize: 24,
    },
    sectionTitle:{
        color: '#f1cf5b',
        fontSize:45,
        fontWeight: 'bold',
    },
    mainContent: {
        flex: 8,
    },
});

And the JSON lookes like this

Object {
  "0": Array [
    "11001",
    "1",
    "Test Announcement",
    "This is a test announcement to prove that the database works",
    "2021-03-18 19:30:00",
  ],
  "1": Array [
    "01001",
    "2",
    "Lost socks",
    "I have lost my favorite socks. If you find them, please let me know",
    "2021-03-22 10:30:00",
  ],
  "2": Array [
    "10101",
    "3",
    "Found Socks",
    "Please disreguard the previous statement. I found my missing socks.",
    "2021-03-18 19:30:00",
  ],
  "3": Array [
    "01101",
    "4",
    "TestAnno",
    "Something or other",
    "2021-01-20 11:20:00",
  ],
  "4": Array [
    "11100",
    "5",
    "asdfasdfsadfasfd",
    "asdfasdfasdfsadf",
    "2021-04-21 15:38:44",
  ],
}

Answer 1

You should use useState to store state inside a function component: https://reactjs.org/docs/hooks-state.html

The fetch call that you have should be done inside useEffect -- otherwise, it'll happen on each render: https://reactjs.org/docs/hooks-effect.html

Inside function AnnouncementsScreen(props) { :

const [data, setData] = useState();
useEffect(() => {
  fetch('https://eo9260z47k.execute-api.us-east-2.amazonaws.com/default/getAnnouncements', {
    method: 'GET',
    headers: {
        // Accept: 'application/json',
        'x-api-key': 'kezCnfAATA2cs6bHh39sg4IEXvPkfnaM220seEk2',
        'Content-Type': 'application/json',
    },       
})
.then((response) => response.json())
.then((responseJson) => {
    setData(responseJson)
})
.catch((error) => {
    console.error(error);
});
},[]);

Then, you can access the state that you've set by using data inside your view hierarchy. Because the JSON that you're getting back is significantly different than the test state that you're using right now, you'll need to structure your Announcement component and or props differently, but this should get you started on at least storing the state.