Get data from JSON objects to FlatList

Today I will show you how to get Jason object data and show them in FlatList, <FlatList>is a component use in react Native to show list items

Before going through app development, we have to get an idea about ‘state’ and ‘props’ key words we use in react native app developments. Today let’s get an idea about state, later we can discuss about props,

  state and setState objects in react

state

State keeps(hold) values(states) and the program gets state values dynamically and behave (Response) according to those values, the state values sync with component in runtime and also it helps us to communication among components too, in default state is an empty object until we set a value to the state. state initially change every time we render render() method.

In advanced programming we can use libraries like redux for manage the state, we don’t need deep knowledge about that, and we can talk about it later,

setState

Set state— setState () update state object, setState is not a must, if we want to change the state we implemented we can do it with setState() method, this update last(latest) state which ‘state’ holds, state is a mutable(changeable) not like props (), props pass parameters within components, but state is not, it only behaves inside the class

export default class App extends Component {

  state = {
        data: [
          {
            title: "Item 1   ",
          },

          {
            title: "Item 1   ",
          },

          {
            title: "Item 1   ",
          }

               ]

         };

Here I implement several JSON objects inside the program , if you want you can separately create Jason object file and import it to the our program or you can do it inside your own application in my example I created it inside the program  with using a key called ‘data’, and set them to the state.

  render() {

    return (

      <View style={styles.container}>

        <FlatList

          data={this. state.data}

          renderItem={({ item }) => (

            <View>

              <Text>{item.title}</Text>

            </View>

          )}

        />

      </View>

    );

  }

}

In here I created a FlatList inside render method and i set state.data to variable data. FlatList must have at least one item to render, after that inside <Text> tag I set title value for print. and remember don't close flat list from a separate closing tag like </FlatList> always close the flat list from />

Conclusion

Here I demonstrate how state and JSON object behave and how we access those data inside a FtalList and print them, I think this is a very important and useful basic concept for small application as well as for large scale applications.