Complex states in React

It’s extended version of state , we have used the single state in React . And now we will use the multiple state in our web app. We will try to learn multiple state by developing an voting app .

import React from 'react';
import {useState} from 'react';
export const App = () => {
  const [candidate1, setCandidate1] = useState(0)
  const [candidate2, setCandidate2] = useState(0)
  const [candidate3, setCandidate3] = useState(0)
return (
    <div>
      {candidate1}
      <button onClick={() => setCandidate1(candidate1 + 1)}>
        Ramesh
      </button>
      <hr/>
      {candidate2}
       <button onClick={() => setCandidate2(candidate2 + 1)}>
        Umesh
      </button>
      <hr/>
      {candidate3}
       <button onClick={() => setCandidate3(candidate3 + 1)}>
        Suresh
      </button>
    </div>
  )
}

Create a new react project using npx and replace App.js file to this . What is our agenda let’s discuss .There are 30 members in committee . They want to choose one member as committee manager. So they organized an election , and whoever has most number of votes will be the committee manager.

Keep in mind-

1- 3 members participating in the election .

2- There are only 30 members including the participants.

import React from 'react';
import { useState } from 'react';
export const App = () => {
    const [candidate1, setCandidate1] = useState(0)
    const [candidate2, setCandidate2] = useState(0)
    const [candidate3, setCandidate3] = useState(0)
    const [count, setCount] = useState(0)
    const handleone = () => {
        setCandidate1(candidate1 + 1)
        setCount(count + 1)
    }
    const handletwo = () => {
        setCandidate2(candidate2 + 1)
        setCount(count + 1)
    }
    const handlethree = () => {
        setCandidate3(candidate3 + 1)
        setCount(count + 1)
    }
return (
        <div>
            {count}
            <hr />
{candidate1}
            <button onClick={handleone}>
                Ramesh
            </button>
            <hr />
            {candidate2}
            <button onClick={handletwo}>
                Umesh
            </button>
            <hr />
            {candidate3}
            <button onClick={handlethree}>
                Suresh
            </button>
        </div>
    )
}

We can replace count by using {candidate1+candidate2+candidate3} , but I will keep count . It will help us to learn more about states.

import React from 'react';
import {useState} from 'react';
export const App = () => {
  const [vote, setVote]= useState({
    candidate1:0,candidate2:0, candidate3:0
  })
  const [count, setCount]= useState(0)
const handleone=()=>{
    const newVote= {candidate1: vote.candidate1+1, candidate2:vote.candidate2, candidate3:vote.candidate3} ;setVote(newVote)
    setCount(count+1)
  }
  const handletwo=()=>{
    const newVote= {candidate1: vote.candidate1, candidate2:vote.candidate2+1, candidate3:vote.candidate3} ;setVote(newVote)
    setCount(count+1)
  }
  const handlethree=()=>{
    const newVote= {candidate1: vote.candidate1, candidate2:vote.candidate2, candidate3:vote.candidate3+1} ;setVote(newVote)
    setCount(count+1)
  }
return (
    <div>
       {count}
       <hr/>
{vote.candidate1}
      <button onClick={handleone}>
        Ramesh
      </button>
      <hr/>
      {vote.candidate2}
       <button onClick={handletwo}>
        Umesh
      </button>
      <hr/>
      {vote.candidate3}
       <button onClick={handlethree}>
        Suresh
      </button>
    </div>
  )
}

Now in this modified version of we have just merged all state in one state like this .

const [vote, setVote]= useState({
    candidate1:0,candidate2:0, candidate3:0
  })

And in the eventhandler , we have created a new set of votes and assigned to setVote . You can format the code using SHIFT+ALT+F.

We can use the concept of copy of array . We can create copy of vote array using spread operator ... .

import React from 'react';
import { useState } from 'react';
export const App = () => {
  const [vote, setVote] = useState({
    candidate1: 0, candidate2: 0, candidate3: 0
  })
  const [count, setCount] = useState(0)
const handleone = () => {
    const newVote = {...vote, candidate1: vote.candidate1 + 1};      setVote(newVote)
    setCount(count + 1)
  }
  const handletwo = () => {
    const newVote = {...vote, candidate2: vote.candidate2 + 1};   setVote(newVote)
    setCount(count + 1)
  }
  const handlethree = () => {
    const newVote = { ...vote, candidate3: vote.candidate3 + 1 }; setVote(newVote)
    setCount(count + 1)
  }
return (
    <div>
      {count}
      <hr />
      {vote.candidate1}
      <button onClick={handleone}>
        Ramesh
      </button>
      <hr />
      {vote.candidate2}
      <button onClick={handletwo}>
        Umesh
      </button>
      <hr />
      {vote.candidate3}
      <button onClick={handlethree}>
        Suresh
      </button>
    </div>
  )
}

Is it required always we have to create a new set of votes ? No , We can directly assigned to setVote , copied and modified array.

import React from 'react';
import { useState } from 'react';
export const App = () => {
    const [vote, setVote] = useState({
        candidate1: 0, candidate2: 0, candidate3: 0
    })
    const [count, setCount] = useState(0)
    const handleone = () => {
        setVote({ ...vote, candidate1: vote.candidate1 + 1 })
        setCount(count + 1)
    }
    const handletwo = () => {
        setVote({ ...vote, candidate2: vote.candidate2 + 1 })
        setCount(count + 1)
    }
    const handlethree = () => {
        setVote( { ...vote, candidate3: vote.candidate3 + 1 })
        setCount(count + 1)
    }
return (
        <div>
            {count}
            <hr />
            {vote.candidate1}
            <button onClick={handleone}>
                Ramesh
            </button>
            <hr />
            {vote.candidate2}
            <button onClick={handletwo}>
                Umesh
            </button>
            <hr />
            {vote.candidate3}
            <button onClick={handlethree}>
                Suresh
            </button>
        </div>
    )
}

Now it’s all done , there are few conditions left to be developed like now everyone can see the vote of every candidate at the time of voting .We will create it confidential . No -one can vote after 30 votes. And after 30 votes , we can see the result .

So these concept can be covered in next reading. Conditional Rendering .