React Tab Menu Implementing Question!

Asked 1 weeks ago, Updated 1 weeks ago, 1 views

Hello, everyone

I'm implementing a tab menu where you can see the content when it's on

How can I add code to see the 0th value on the first screen without clicking?

I'd really appreciate your help!

//  
const [tabIsOn, setTabIsOn] = useState([]);

  const tapIndex = index => {
    setTabIsOn(index);
  }

              <ul className={toggle ? "tab on" : "tab"}>
                <li className={ tabIsOn === 0 ? "on" : ""}
                onClick={() => tapIndex(0)}
                >
                  <a href="#/help">
                    <div className="checkCircle"><i className="fas fa-check"></i></div>All Topics</a>
                </li>
                <li className={ tabIsOn === 1 ? "on" : ""}
                onClick={() => tapIndex(1)}
                >
                  <a href="#/help"><div className="checkCircle"><i className="fas fa-check"></i></div>Orders</a>
                </li>
              </ul>

              <div className={ tabIsOn === 0 ? "tableBox on" : "tableBox" }>

                    <article className="post"
                     onClick={e=>handleClick(e)}
                     >
                        <h2>{help.title}</h2>
                        <div className="con">
                          <p>{help.content}</p>
                        </div>
                        <i className="fas fa-chevron-up up"></i>
                        <i className="fas fa-chevron-down down"></i>
                    </article>
              </div>

             <div className={ tabIsOn === 1 ? "tableBox on" : "tableBox" }>

                    <article className="post"
                     onClick={e=>handleClick(e)}
                     >
                        <h2>{help.title}</h2>
                        <div className="con">
                          <p>{help.content}</p>
                        </div>
                        <i className="fas fa-chevron-up up"></i>
                        <i className="fas fa-chevron-down down"></i>
                    </article>
            </div>

react

2022-09-20 11:17

1 Answers

Wouldn't the easiest way be to manually invoke setTabIsOn(0) right after rendering? 😂


2022-09-20 11:17

If you have any answers or tips


© 2022 pinfo. All rights reserved.