React js Hooks

useState() Hook - in React js

December 01, 2021

What is State?

The state is an instance of React Component Class can be defined as an object    of a set of observable properties that control the behavior of the component. In other words, the State of a component is an object that holds  some information that may change over the lifetime of the component

Here in this example you will see , how to use useState(0) , number values

 import React, {useState} from 'react';

  function App() {

    const [count, setCount] = useState(0)
 
    return (
      <div>

        <button onClick={()=>setCount(count+1)}>Count {count}</button>

      </div>
    );
  }

  export default App;

Here in this example you will see , how to use useState("string") , string values

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

  function Usestate() {

      const [data,setData] = useState("react js")

      return (
          <div className="Usestate">
              <h2>{data}</h2>
              <button onClick={()=>setData("use state")}> Update Data</button>
          </div>
      );
  }

  export default Usestate;

useState() with Boolean value / if - else

You can use an if...else condition when setting the state with useState in React — typically within an event handler or inside useEffect, not directly inside the useState() function call (which should be synchronous and simple).


 import React, { useState } from 'react';

  function App() {

    var [login,logOut] = useState(false);

    if (login)
    {
    return (
        <div>
          <h2>this is login</h2>
        </div>
    )

    }
    else
    {
      return(
        <div>
          <h2>this is logOut</h2>
        </div>
      )
    }

  }

  export default App;

useState() with Ternary Operator

Using useState with a ternary operator in React is a common way to conditionally set or display values based on some logic. Here's a clear example showing both how to use it in a setter and in JSX.

import React, { useState } from 'react';

 export default function App() {

    var [login,logOut] = useState(false);

    return (
      <div>
       
       {login ? <h2>this is login</h2> : <h2>this is logOut</h2>}

      </div>
  )

  }

useState() with ARRAY In React JS, arrays are commonly used to store lists of data like items, users, or posts. Here's a quick overview of how arrays work in React:

import React, { useState } from 'react'

export default function Home() {

    var [fvalue,svalue] = useState(["reactjs","javascript","nodejs"]);

  return (
    <div>
      <ul>
        {
          fvalue.map((fvalue)=>(
            <li>{fvalue}</li>
          ))
        }
      </ul>
    </div>
  )
}

useState() with JSON Data - array with objects In React JS, you can use the useState hook to manage JSON data just like any other stateful data. Here's a simple example to show how to work with JSON data using useState.

import React, { useState } from 'react'

export default function Home() {

    var [fvalue,svalue] = useState([
    { id: 1, name: 'Alice', age: 25 },
    { id: 2, name: 'Bob', age: 30 },
  ]);

  return (
    <div>
      <ul>
        {
          fvalue.map((fvalue)=>(
            <li>{fvalue.name},{fvalue.age}</li>
          ))
        }
      </ul>
    </div>
  )
}



useState with Object..using onChange() Event

 
  import React, {useState} from 'react';

  function App(){

    var [fName, lName] = useState({
      name:"reactjs",
      email:'demo@gmail.com',
    })

    var nameHandelChange=(e)=>{
      lName(e.target.value);
    }

    var emailHandelChange =(e)=>{
      lName(e.target.value);
    }

    return(
      <div>

        <form>
          <input value={fName.name} onChange={nameHandelChange}             placeholder="user name"/>
          <input value={fName.email} onChange={emailHandelChange}             placeholder="email" />
        </form>


      </div>
    )
  }

  export default App;
 

onChange() Event with Radio Button

 
  import React, {useState} from 'react';

  function App(){

    var [formData, setformData] = useState({
      isAgree : false, //checkbox
      gender :"male" //radio
    })

    var handleChange = event =>{
      var target = event.target
      var name = target.name
      var value = target.value

      setformData({
        ...formData,
        [name]: value
      })
    }

   
    return(
      <div>

       <label>Male ::</label>
       <input type="radio" name="gender" value="male"
       onChange={handleChange} checked={formData.gender=="Male"} />
       
       <label>Female ::</label>
       <input type="radio" name="gender" value="female"
       onChange={handleChange} checked={formData.gender=="Female"} />

       <p>
        Gener : {formData.gender}
       </p>

      </div>
    )
  }

  export default App;

Show & Hide , Events in Functional Component



  import React, { useState } from 'react';
  import './App.css';

  function App() {
    const [isShown, setIsShown] = useState(false);

    return (
      <div className="App">
        <button
          onMouseEnter={() => setIsShown(true)}
          onMouseLeave={() => setIsShown(false)}>
          Hover over me!
        </button>
        {isShown && (
          <div>
            I'll appear when you hover over the button.
          </div>
        )}
      </div>
    );
  }

  export default App;