Переключите кнопку, используя Hooks в ReactJS, чтобы отобразить различный контент

Question

Я пытаюсь создать кнопку переключателя, которая может отображать 2 разных содержимого в зависимости от того, на какую из 2 кнопок я нажимаю, используя хуки в реакции js.

Я хотел бы, например, отобразить предложение «Вы нажали на левую кнопку», когда я нажимаю на левую, и наоборот, когда я нажимаю на правую.

Я бы хотел, чтобы содержимое отображалось непосредственно под кнопками переключателей.

Кроме того, я бы хотел, чтобы моя кнопка оставалась активной, когда я нажимал на нее. То есть он должен быть более темного цвета, поскольку он активен.

У вас есть идея?

Это фрагмент кода:

import React,{useState} from 'react';
import {Button} from "react-bootstrap";
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
import {faBars, faChartLine} from "@fortawesome/free-solid-svg-icons";
import CustomerTable from "../CustomerTable/CustomerTable";

export default function HookButtonSwitch(props) {
    const [resultatContenu, setResultatContenu] = useState('Content initial');
    const [state, setState] = useState(false);

    const handleEventSwitchButton = event => {

        let resultatContenu;
        switch(event.target.id) {
            case 'stats':
                console.log("Coucou Stats");
                resultatContenu = 'Stats';
                break;
            case 'list':
                console.log("Coucou List");
                resultatContenu = 'LIST';
                break;
        }
        setResultatContenu(resultatContenu);

    };

   const toggle = () => setState(!state);

    return (
        <div>

            <br />

            <Button
                id="list"
                variant="light"
                className="border-radius-left"
                onClick={handleEventSwitchButton}
            >
                <FontAwesomeIcon icon={faBars} />
            </Button>

            <Button
                id="stats"
                variant="light"
                className="border-radius-right"
                onClick={handleEventSwitchButton}
            >
                <FontAwesomeIcon icon={faChartLine} />
            </Button>

            <div> {resultatContenu} </div>

            {/* <p>-------</p>

            <div onClick={toggle}>
                <div className="toggle">
                    {state ? <div>Yes! ?  </div>   : <div>No! ?</div>}
                </div>
            </div>
            */}
        </div>
    )
}

Заранее спасибо.

Answer 1

проверить, надеюсь, его работа

import React,{useState} from 'react';
import {Button} from "react-bootstrap";
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
import {faBars, faChartLine} from "@fortawesome/free-solid-svg-icons";
import CustomerTable from "../CustomerTable/CustomerTable";

export default function HookButtonSwitch(props) {
    const [resultatContenu, setResultatContenu] = useState('Content initial');
    const [state, setState] = useState(false);

    const handleEventSwitchButton = (event,condition) => {

this.setState({buttonSwitch:condition})

        let resultatContenu;
        switch(event.target.id) {
            case 'stats':
                console.log("Coucou Stats");
                resultatContenu = 'Stats';
                break;
            case 'list':
                console.log("Coucou List");
                resultatContenu = 'LIST';
                break;
        }
        setResultatContenu(resultatContenu);

    };

   const toggle = () => setState(!state);
   const {buttonSwitch=false}= this.state
    return (
        <div>

            <br />

            <Button
                id="list"
                variant="light"
                className="border-radius-left"
                style={buttonSwitch&&{backgroundColor:'black'}}
                onClick={(e)=>handleEventSwitchButton(e,true)}
            >
                <FontAwesomeIcon icon={faBars} />
            </Button>

            <Button
                id="stats"
                variant="light"
                className="border-radius-right"
             style={!buttonSwitch&&{backgroundColor:'black'}}
                onClick={(e)=>handleEventSwitchButton(e,false)}
            >
                <FontAwesomeIcon icon={faChartLine} />
            </Button>

            <div> {resultatContenu} </div>

            {/* <p>-------</p>

            <div onClick={toggle}>
                <div className="toggle">
                    {state ? <div>Yes! ?  </div>   : <div>No! ?</div>}
                </div>
            </div>
            */}
        </div>
    )
}