How to use Multiple States in React Native Hooks Functional Component

In our previous tutorial we have learn about using Single states in react native hooks. This tutorial is the 2nd part of States in React Native Hooks tutorial. In this tutorial we would learn about How to use Multiple States in React Native Hooks Functional Component. As we all know react native Hook comes with much easier coding options for a developer which makes it easy to understand, easy to read and easy to write. Many of us don’t know how states used in Hooks and how we can change State value in React native Hooks. So today we would learn about using multiple states in React Native Hooks. So let’s get started 🙂 .

Contents in this project How to use Multiple States in React Native Hooks Functional Component:

1. Open your project’s main App.js file and import useState and useEffect from React.

2. Import View, StyleSheet, TouchableOpacity and Text component in your project.

3. Create our main export default function FirstApp(). This is our main default function. In functional component we would call the function as default code rendering block.

4. Creating a State named as varOne . To change the varOne State value we would make a function named as setOne. Now we would set the State value as Zero.

5. Creating another State named as varTwo. We would also make a function named as setTwo to change the State value.

How to use Multiple States in React Native Hooks Functional Component6. Creating one more State named as varThree. We would make a make a function named as setThree to change the State value.

7. Creating 3 constant functions named as changeOne, changeTwo and changeThree. Inside each function we would call the State functions to update the State value and print on Terminal screen after done update.

8. Creating Return block and here we would make a Root View component and then we would make 3 Touchable Opacity buttons. We would call above all 3 methods each on Button Click event.

Screenshots:

How to use Multiple States in React Native Hooks Functional Component

3 Comments

  1. hi in my old react native project having infinite scroll list view (with php back end). but that code is not working with new react native version .i am unable to convert that code into new react native code format .i will share the code .kindly provide a solution. please give mailid i will send the code

  2. hi
    i send that code to you

Leave a Reply

Your email address will not be published. Required fields are marked *