React hooks Multiple useState example

• Create Components folder under src folder
• Add MultipleStateHooksEXP1.js file and add below Code

import React, { useState } from "react";

function MultipleStateHooksEXP1() {

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

const [Student, setStudents] = useState({ name: "adi", id: 100 });

const [coupon, setCoupon] = useState(null);

return (

<>

<div>React Multiple State Hook EXP1</div>

<div>{count}</div>

<div>

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

</div>

<br />

<div>

Name:{Student.name}

<br />

Id:{Student.id}

<p>Student Info: {JSON.stringify(Student)}</p>

</div>

<div>

<button onClick={() => setStudents({ ...Student, name: "jc" })}>

Update Name

</button>

</div>

<div>

<button onClick={() => setStudents({ ...Student, id: 501 })}>

Update Id

</button>

</div>

<div>{coupon}</div>

<div>

<button onClick={() => setCoupon(coupon + 1)}>Click</button>

</div>

</>

);

}

export default MultipleStateHooksEXP1;

• Open index.js file and update code as below

import React from "react";

import ReactDOM from "react-dom";

import MultipleStateHooksEXP1 from "./components/MultipleStateHooksEXP1";

function App() {

return (

<div className="App">

<MultipleStateHooksEXP1 />

</div>

);

}

const rootElement = document.getElementById("root");

ReactDOM.render(<App />, rootElement);

Output: