Use same usestate hook for multiple icons-CodePudding

I have a two buttons in my react project (material ui icons) which are lowerarrow(both) and i made a use state and function to change upper arrow to lower arrow when it is clicked but i dont know how to use the same state for my another icon too, maybe using some id or something i dont know , right now i put {iconstate} in both the icons so both the icons are changing together i am trying to figure out how to change them individually without making new state and function here is my code :- JSX:-

import React , {useState} from 'react';
import Weather_leftpanecss from './Weather_leftpane.module.css'
import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';

export default function Weather_leftpane() {

  const [iconstate, seticonstate] = useState(<KeyboardArrowDownIcon/>)
  const [valuestate, setvaluestate] = useState(true)


  const togglearrow = ()=>{
    if(valuestate==true){
      seticonstate(<KeyboardArrowUpIcon/>)
      setvaluestate(false)

    }
    else{
      seticonstate(<KeyboardArrowDownIcon/>)
      setvaluestate(true)
    }
  }

  return <div>
      <div className={Weather_leftpanecss.main}>
        <div id={Weather_leftpanecss.item_1}>Weather</div>
        <div id={Weather_leftpanecss.item_2}>
          <input type="text" placeholder='Search for city..' />
        </div>
        <div id={Weather_leftpanecss.item_3}>
          <div className={Weather_leftpanecss.item_3_content} id="item_3_1">
            Cities
          </div>
          <div className={Weather_leftpanecss.item_3_content} id="item_3_2" onClick={togglearrow} >
            {iconstate}
          </div>
        </div>
        <div id={Weather_leftpanecss.item_4}>
          <div className={Weather_leftpanecss.item_4_content} id="item_4_1">
            Settings
          </div>
          <div className={Weather_leftpanecss.item_4_content} id="item_4_2" onClick={togglearrow}>
            {iconstate}
          </div>
        </div>
      </div>

  </div>;
}

css:-

.App {
  font-family: sans-serif;
  text-align: center;
}

(not the real css ,just added it because i have included it everywhere in my code with module)

CodePudding user response：

Here you need to save the selected Id in the state.

import React , {useState} from 'react';
import Weather_leftpanecss from './Weather_leftpane.module.css'
import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';

export default function Weather_leftpane() {

  const [valuestate, setvaluestate] = useState(true)
  const [id, setId] = useState(null);


  const togglearrow = (val)=>{        
    if(valuestate==true){
      setvaluestate(false)
    }else{
      setvaluestate(true)
    }
    setId(val);
  }

  return <div>
      <div className={Weather_leftpanecss.main}>
        <div id={Weather_leftpanecss.item_1}>Weather</div>
        <div id={Weather_leftpanecss.item_2}>
          <input type="text" placeholder='Search for city..' />
        </div>
        <div id={Weather_leftpanecss.item_3}>
          <div className={Weather_leftpanecss.item_3_content} id="item_3_1">
            Cities
          </div>
          <div className={Weather_leftpanecss.item_3_content} id="item_3_2" onClick={() => togglearrow('item_3_2')} >
            {valuestate && id == 'item_3_2' ? KeyboardArrowUpIcon : KeyboardArrowDownIcon }
          </div>
        </div>
        <div id={Weather_leftpanecss.item_4}>
          <div className={Weather_leftpanecss.item_4_content} id="item_4_1">
            Settings
          </div>
          <div className={Weather_leftpanecss.item_4_content} id="item_4_2" onClick={() => togglearrow('item_4_1')}>
          {valuestate && id == 'item_4_1' ? KeyboardArrowUpIcon : KeyboardArrowDownIcon }
          </div>
        </div>
      </div>

  </div>;
}

CodePudding user response：

Here you can use one state to achieve that, saving in one state the status of both buttons, which one is clicked or not and render the icon based on that status.

the toggleArrow function gets the itemId and uses it to set the updated value of the button. We use !prevState[itemId] since if it is false it will become true and vise versa.

I took the liberty of giving the state a more informative name than a generic name.

import React, { useState } from "react";
import Weather_leftpanecss from "./Weather_leftpane.module.css";
import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
import KeyboardArrowUpIcon from "@mui/icons-material/KeyboardArrowUp";

export default function Weather_leftpane() {
  const [clickedButtons, setClickedButtons] = useState({
    item_3_2: false,
    item_4_2: false
  });

  const toggleArrow = (itemId) => {
    setClickedButtons((prevState) => ({
      ...prevState,
      [itemId]: !prevState[itemId]
    }));
  };

  return (
    <div>
      <div className={Weather_leftpanecss.main}>
        <div id={Weather_leftpanecss.item_1}>Weather</div>
        <div id={Weather_leftpanecss.item_2}>
          <input type="text" placeholder="Search for city.." />
        </div>
        <div id={Weather_leftpanecss.item_3}>
          <div className={Weather_leftpanecss.item_3_content} id="item_3_1">
            Cities
          </div>
          <div
            className={Weather_leftpanecss.item_3_content}
            id="item_3_2"
            onClick={() => toggleArrow("item_3_2")}
          >
            {clickedButtons["item_3_2"] ? (
              <KeyboardArrowUpIcon />
            ) : (
              <KeyboardArrowDownIcon />
            )}
          </div>
        </div>
        <div id={Weather_leftpanecss.item_4}>
          <div className={Weather_leftpanecss.item_4_content} id="item_4_1">
            Settings
          </div>
          <div
            className={Weather_leftpanecss.item_4_content}
            id="item_4_2"
            onClick={() => toggleArrow("item_4_2")}
          >
            {clickedButtons["item_4_2"] ? (
              <KeyboardArrowUpIcon />
            ) : (
              <KeyboardArrowDownIcon />
            )}
          </div>
        </div>
      </div>
    </div>
  );
}