Ninja - React Basic 8 - Using State

Here we look at data or variable state change over event or  some action.

Let's create a simple variable and see what's happening in react template.

1. let's declare a variable 'name' 

2. create <p> tag and output name  --> {name}

let name = 'mario';

<p>{name}</p>

Scenario 2: Click button, change the name

1. we have function for handleClick and set name='Alex'

let's see whether name change in the template <p>{name}</p>

Note : Name value does not change in the template. It's  still 'mario'

But if you use console.log , you can see the name is changed to 'Alex'

So why not in the template ?

Reason :  The variable we created is not Reactive.

React does not watch the changes of the variable.

When value changes, template does not "ReRender"

To do this, we use a 'Hook' --> UseState

you can identify a hook with name "Use"

In order to use, we need to import

use curly braces to Destructure use state hook from React library

So let's remove what we have written inside handleClick and rewrite using useState

import {useState } from 'react';

but as we have other imports it will looks like this

import React, { Component, useState } from 'react';

Then look at step by step use of state

1. comment out variable  

// let name = 'mario';

2. Instead we gone use a Reactive value using 'useState'

3. How we do. useState is a function , so  --> useState()

4. Then we use useState with a initial value --> useState('mario')

5. Then we need to store it. Else it will be just an invoke.

6. how to do that ? we use 'const' but there is a return from the useState function. SO we use array [] to destructuring to grab two values return by hook

7. const []  = useState('mario')

8. Two return values, so first value will be name 'mario' we set. we can give an any name for it, as here it's a name of a person we can call 'name'. second value will be function, 'which we can use to chnage the value'. Normally in convention, prefix 'set' and 'name of the variable'. Here 'setName'

9. Now we can use the state to get the value for the Template, or render value for template using state

10. So at beginning 'mario' and once click , change the value for 'Alex'

11. So we need to call the function to change the value of useSet, setName

12. We call 'setName' inside our function 'handleClick'. When we call, we can pass the new value

const [name, setName] = useState('mario');

const handleClick = () => {

   setName('Alex');

}

13. This value is reactive. If the value of 'name' changes it will be change inside the template also.

14. So when we call the function, react will  Rerender the template. When it ReRender, template will have new value as it's been updated.

15. 

Note Error:

---------------

Compiled with warnings.

Failed to compile.

src\component\Home.js

  Line 4:25:  React Hook "useState" cannot be called at the top level. React Hooks must be called in a React function component or a custom React Hook function  react-hooks/rules-of-hooks

Search for the keywords to learn more about each error.

My Import

---------

import React, { Component, useState } from 'react';

Correct one

--------

import React, { Component, useState } from 'react';

Reason here 

1. i was calling setState outside function

2. Using a class, instead of function

Final code

---------------

import { useState } from 'react';

const Home = () =>{

    const [name, setName] = useState('mario');

    const [age, setAge] = useState(25);

    const handleClick = () => {

        setName('Alex');

        setAge(30);

    }

    return (

        <div className="home">

            <h2>HomePage</h2>

            <p>{ name } is { age } years old</p>

            <button onClick={handleClick} >Click Me</button>

        </div>

    );

}

Note: Here, Home has set on variable , holding function.

Inside , we define variables, 

export default Home;