Question 172425 in Javascript Question posted in
A very good W3school tutorial can be found here.

Can React useState toggle multiple buttons dynamically?

Please help me out here. I am trying to toggle the faq buttons, basically when button1 is clicked -> state1 is turned true (tooltip is opened) -> button2 is clicked -> state2 is true, state1 is turned false , tooltip closes. This is what I currently have


const App = () => {

const [isOpen, setIsOpen] = useState(false);
const faqTipBtns = ['faqBtn1', 'faqBtn2', 'faqBtn3'];

const FaqtipIcon = (id) => {
     return(
         <button id = {id}
          onClick = {() => toggleFaqTipBtn()}>
          <FaqtipIcon isOpen = {isOpen}/>
         </button>
     )
};

const toggleFaqTipBtn = () => {

  {faqTipBtns.map((id) => {
        setIsOpen((prev) => !prev)
})}


   return (
     <form>
        <RadioGroup>
         <div>
            <Radio
               id='idA'
               label = 'SomeLabel'/>
               {FaqtipIcon('idA')}
           </div>
           {isOpen && (
                <div>
                   <FaqtipContent
                     isOpen = {isOpen}
                     content = {<p>Some Content</p>} 
                    />
                </div>   
        </RadioGroup>
     </form>
)

}
Tags:

2

Answers


  1. 0

    Is this what you’re looking for where you want to toggle the buttons?

    const FAQ_TIP_BUTTONS = ["faqBtn1", "faqBtn2", "faqBtn3"];

const App = () => {
  // Store active button id
  const [isOpen, setIsOpen] = useState("faqBtn1");

  return (
    <form>
      <RadioGroup>
        <div>
          <Radio id="idA" label="SomeLabel" />
          {/* Display all buttons */}
          {FAQ_TIP_BUTTONS.map((id) => (
            <FaqtipIcon isOpen={id === isOpen} onClick={() => setIsOpen(id)} />
          ))}
        </div>
        {isOpen && (
          <div>
            <FaqtipContent isOpen={isOpen} content={<p>Some Content</p>} />
          </div>
        )}
      </RadioGroup>
    </form>
  );
};

const FaqtipIcon = ({ isOpen, onClick }) => {
  return (
    <button onClick={onClick}>
      <FaqtipIcon isOpen={isOpen} />
    </button>
  );
};
    Login or Signup to reply.
  2. 0
    React useState to dynamically toggle multiple buttons

    I understand your question like that show tooltip that related of button.
    example

    import "./styles.css";
import { useState } from "react";

export default function App() {
  const [selectedBtn, setSelectedBtn] = useState("");
  const faqTipBtns = ["faqBtn1", "faqBtn2", "faqBtn3"];

  return (
    <div className="App">
      <h1>show Tooltip that related with his button</h1>
      {faqTipBtns.map((button) => (
        <div>
          {selectedBtn === button ? <div> Tooltip {button}</div> : <div />}
          <button onClick={() => setSelectedBtn(button)}>{button}</button>
        </div>
      ))}
    </div>
  );
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search