React-hooks 处理多个按钮 state 点击

Question

I have 5 buttons in my app which I would like to change the background color based on button states, so now when I click one button it affects all the buttons (toggle-class), not only that I need to change the button color but also I need to hide and show data for each button, so I am using condition rendering, the default tab is social media. so, for example, u click button 1 it changes the background color and it shows div withe information, etc

Here is what I have so far

    import React, { useState, useEffect, useRef } from 'react';
    
    function Mata() {
    const [isBlack, setIsBlack] = useState(0);
    const [tab, setTab] = useState('socialmedia');
    
    const handleBtn1 = (e) =>{
        e.preventDefault();
        setIsBlack(!isBlack);  
        setTab('data1); 
    }
    const handleBtn2 = (e) =>{
        e.preventDefault();
        setIsBlack(!isBlack);  
        setTab('data2'); 
    }
    const handleBtn3 = (e) =>{
        e.preventDefault();
        setIsBlack(!isBlack); 
        setTab('data3'); 
    }
    const handleBtn4 = (e) =>{
        e.preventDefault();
        setIsBlack(!isBlack);  
        setTab('data4'); 
    }
    const handleBtn5 = (e) =>{
        e.preventDefault();
        setIsBlack(!isBlack);  
      setTab('data5'); 
    }
    

        return (
            <div className="container">
                <button style={{ backgroundColor: isBlack ? '#262626' : '#F3F3F3'}} className={`btn1 ${isBlack && activeTab}`} onClick={handleBtn1}>btn1</button>
                <button style={{ backgroundColor: isBlack ? '#262626' : '#F3F3F3'}} className={`btn2 ${isBlack && activeTab}`} onClick={handleBtn2}>btn2</button>
                <button style={{ backgroundColor: isBlack ? '#262626' : '#F3F3F3'}} className={`btn3 ${isBlack && activeTab}`} onClick={handleBtn3}>btn3</button>
                <button style={{ backgroundColor: isBlack ? '#262626' : '#F3F3F3'}} className={`btn4 ${isBlack && activeTab}`} onClick={handleBtn4}>btn4</button>
                <button style={{ backgroundColor: isBlack ? '#262626' : '#F3F3F3'}} className={`btn5 ${isBlack && activeTab}`} onClick={handleBtn5}>btn5</button>
             
    {tab === 'socialmedia' && <>
       ....data
   </div>

{tab === 'data1' && <>
       ....data
   </div>
............
..........
            </div>
        )
    }
    
    export default Mata

What do I need to change to get this working?

Answer 1

Why are you doing this

const [isBlack, setIsBlack] = useState(0);

instead of doing this?

const [isBlack, setIsBlack] = useState(false);

Also to make use of useState you have to edit your code like the following, as hooks can only be called inside of the body of a function component.

import React, { useState, useEffect, useRef } from "react";

function Mata() {
  const [isBlack, setIsBlack] = useState(false); // correction here

  const handleBtn1 = e => {
    e.preventDefault();
    setIsBlack(!isBlack);
  };
  const handleBtn2 = e => {
    e.preventDefault();
    setIsBlack(!isBlack);
  };
  const handleBtn3 = e => {
    e.preventDefault();
    setIsBlack(!isBlack);
  };
  const handleBtn4 = e => {
    e.preventDefault();
    setIsBlack(!isBlack);
  };
  const handleBtn5 = e => {
    e.preventDefault();
    setIsBlack(!isBlack);
  };
  return (
    <div className="container">
      <button
        style={{ backgroundColor: isBlack ? "#262626" : "#F3F3F3" }}
        className={`btn1 ${isBlack && activeTab}`}
        onClick={handleBtn1}
      >
        btn1
      </button>
      <button
        style={{ backgroundColor: isBlack ? "#262626" : "#F3F3F3" }}
        className={`btn2 ${isBlack && activeTab}`}
        onClick={handleBtn2}
      >
        btn2
      </button>
      <button
        style={{ backgroundColor: isBlack ? "#262626" : "#F3F3F3" }}
        className={`btn3 ${isBlack && activeTab}`}
        onClick={handleBtn3}
      >
        btn3
      </button>
      <button
        style={{ backgroundColor: isBlack ? "#262626" : "#F3F3F3" }}
        className={`btn4 ${isBlack && activeTab}`}
        onClick={handleBtn4}
      >
        btn4
      </button>
      <button
        style={{ backgroundColor: isBlack ? "#262626" : "#F3F3F3" }}
        className={`btn5 ${isBlack && activeTab}`}
        onClick={handleBtn5}
      >
        btn5
      </button>
    </div>
  );
}

export default Mata;

Answer 2

You need individual state for each button. I suggest using a map to store a button id and a boolean value for whether it is "black" or not, ie the click handler simply toggles a boolean value. I don't know if it was a typo in copy/pasting code to SO, but the react state needs to be declared in in the functional component body.

const [isBlack, setIsBlack] = useState({});

You can also use a single click handler by converting it to a curried callback, taking and enclosing in scope the button id. This uses a functional state update to shallowly copy existing state and updates the value of the enclosed button id.

const handleBtn = btnId => e => {
  e.preventDefault();
  setIsBlack(state => ({
    ...state,
    [btnId]: !state[btnId],
  }));
};

Complete code

function Mata() {
  const [activeTab, setActiveTab] = useState("activeTab");
  const [isBlack, setIsBlack] = useState({});

  const handleBtn = btnId => e => {
    e.preventDefault();
    setIsBlack(state => ({
      ...state,
      [btnId]: !state[btnId]
    }));
  };

  return (
    <div className="container">
      <button
        style={{ backgroundColor: isBlack["btn1"] ? "#262626" : "#F3F3F3" }}
        className={`btn1 ${isBlack["btn1"] && activeTab}`}
        onClick={handleBtn("btn1")}
      >
        btn1
      </button>
      <button
        style={{ backgroundColor: isBlack["btn2"] ? "#262626" : "#F3F3F3" }}
        className={`btn2 ${isBlack["btn2"] && activeTab}`}
        onClick={handleBtn("btn2")}
      >
        btn2
      </button>
      <button
        style={{ backgroundColor: isBlack["btn3"] ? "#262626" : "#F3F3F3" }}
        className={`btn3 ${isBlack["btn3"] && activeTab}`}
        onClick={handleBtn("btn3")}
      >
        btn3
      </button>
      <button
        style={{ backgroundColor: isBlack["btn4"] ? "#262626" : "#F3F3F3" }}
        className={`btn4 ${isBlack["btn4"] && activeTab}`}
        onClick={handleBtn("btn4")}
      >
        btn4
      </button>
      <button
        style={{ backgroundColor: isBlack["btn5"] ? "#262626" : "#F3F3F3" }}
        className={`btn5 ${isBlack["btn5"] && activeTab}`}
        onClick={handleBtn("btn5")}
      >
        btn5
      </button>
    </div>
  );
}

There is a lot of repeated code, so a more DRY version where active tab and buttons are passed as props.

function Mata({ activeTab = '', buttons }) {
  const [isBlack, setIsBlack] = useState({});

  const handleBtn = btnId => e => {
    e.preventDefault();
    setIsBlack(state => ({
      ...state,
      [btnId]: !state[btnId]
    }));
  };

  return (
    <div className="container">
      {buttons.map(btn => (
        <button
          style={{ backgroundColor: isBlack[btn] ? "#262626" : "#F3F3F3" }}
          className={`btn1 ${isBlack[btn] && activeTab}`}
          onClick={handleBtn(btn)}
        >
          {btn}
        </button>
      ))}
    </div>
  );
}

Used as such

const buttons = ["btn1", "btn2", "btn3", "btn4", "btn5"];

...

<Mata buttons={buttons} />

Edit

Seems you are really creating a "tab manager". I suggest lofting state to the parent and converting Mata to a "dumb" component that simply renders the "tab" buttons. Takes 3 props: an active tab index, array of buttons, and a state update callback.

function Mata({ activeTab = -1, buttons, setActiveTab }) {
  return (
    <div className="container">
      {buttons.map((btn, i) => {
        const isActive = i === activeTab;
        return (
          <button
            key={btn.id}
            style={{ backgroundColor: isActive ? "#262626" : "#F3F3F3" }}
            className={`${btn.id} ${isActive && activeTab}`}
            onClick={() => setActiveTab(i)}
          >
            {btn.id}
          </button>
        );
      })}
    </div>
  );
}

Example tabs data

const tabs = [
  { id: "btn1", data: "data1" },
  { id: "btn2", data: "data2" },
  { id: "btn3", data: "data3" },
  { id: "btn4", data: "data4" },
  { id: "btn5", data: "data5" }
];

Example usage

<Mata activeTab={activeTab} buttons={tabs} setActiveTab={setActiveTab} />

{activeTab === -1 ? (
  <div>Social Media</div>
) : (
  <div>{tabs[activeTab].data}</div>
)}

Adding "Icons"

Similar to Choosing the Type at Runtime

If SVG icons are not already react components, wrap them into a simple functional component

const Icon1 = () => <svg>...</svg>;

Add an icon field to the tabs data and set the value to the icon component

const tabs = [
  { id: "btn1", data: "data1", icon: Icon1 },
  { id: "btn2", data: "data2", icon: Icon2 },
  { id: "btn3", data: "data3", icon: Icon3 },
  { id: "btn4", data: "data4", icon: Icon4 },
  { id: "btn5", data: "data5", icon: Icon5 }
];

And destructure and rename to render

function Mata({ activeTab = -1, buttons, setActiveTab }) {
  return (
    <div className="container">
      {buttons.map((btn, i) => {
        const isActive = i === activeTab;
        const { icon: Icon, id } = btn; // <-- rename icon -> Icon

        return (
          <button
            key={id}
            style={{ backgroundColor: isActive ? "#262626" : "#F3F3F3" }}
            className={`${id} ${isActive && activeTab}`}
            onClick={() => setActiveTab(i)}
          >
            <Icon /> {id} // <-- render icon component
          </button>
        );
      })}
    </div>
  );
}