Question 216336 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – how to toggle hiding other elements after button clicks react js?

i have managed to toggle tables upon button clicks but i want for each table to only show when its button is clicked and then hide when another button meant for another table is clicked. where do i need to make changes and what do i need to add for it to work accordingly? This is the code im using currently:

const [show, toggleShow] = useState({}); 
const [showStock, toggleShowStock] = useState({});
const [showEcartStock,toggleShowEcartStock]=useState({});
<Layout>
      <Content
         style={{
           margin: 0,
           backgroundColor: "white",
         }}
       >
         <div
           className="site-layout-background"
           style={{
             padding: 24,
             minHeight: 360,
           }}
         >
           <Home sessionName={session_name} sessionID={state}  session_status={session_status}/>
           <div style={{ heigth: "80vh",margin: "16px" }}>
        <Row
          gutter={[13, 5]}
          justify="center"
          align="top"
        >
          <Col
          onClick={() => toggleShowStock(!showStock)}>
            <Button
            style={{
              backgroundColor: "#5e89af",
                color: "white",
                //padding: '18px 40px',
                height: "60px",
                width: "325px",
                alignItems: "center",
            }}
            >
              état stock
            </Button>
          </Col>

           <Col onClick={() => toggleShow(!show)}>
            <Button
              style={{
                backgroundColor: "#5e89af",
                color: "white",
                height: "60px",
                width: "325px",
                alignItems: "center",
              }}
            >
              affectation
            </Button>
          </Col> 

          <Col
          >
            <Button
              onClick={()=>{toggleShowEcartStock(!showEcartStock)}}
              style={{
                backgroundColor: "#5e89af",
                color: "white",
                height: "60px",
                width: "325px",
                alignItems: "center",
              }}
            >
              écart stock
            </Button>
          </Col>
        </Row>
      </div>
            {show && (
             <AffectaionsTable sessionType={session_type} sessionName={session_name} sessionID={state} />
           )}
      
           {showStock && <StocksTable record={record} sessionID={state}/>}
           {showEcartStock && <EcartStockRes sessionID={state}/>}
           {showEcartStock && <EcartStockComTour sessionID={state}/>}
           {showEcartStock && <EcartStockTechTour sessionID={state}/>}
           </div>
       </Content>
    
     </Layout>
Tags:

2

Answers


  1. 0

    You can create an onClick function and set show and showEcartStock to false when showStock is true

    here is an eg:

    const handleClick = (e, val) => {
 if (val === 'showStock') {
   toggleShowStock(true);
   toggleShowEcartStock(false);
   toggleShow(false)
 }
 else if (like the above change accordingly......)
}

    Then use this function in onClick

    <Col
          onClick={handleClick('showStock')}>
            <Button
            style={{
              backgroundColor: "#5e89af",
                color: "white",
                //padding: '18px 40px',
                height: "60px",
                width: "325px",
                alignItems: "center",
            }}
            >
              état stock
            </Button>
          </Col>
    Login or Signup to reply.
  2. 0

    If the point is to make only one table visible at a time, you may slightly refactor the way you manage it with your state.

    You may keep there only one id of the item being currently visible.

    Here’s a quick demo:

    const { useState } = React,
      { render } = ReactDOM,
      rootNode = document.getElementById('root')
      
const App = () => {
  const [expandedItemId, setExpandedItemId] = useState(null)
  const toggleVisibility = itemId =>
      setExpandedItemId(expandedItemId === itemId ? null : itemId)

  return (
    <div className="container">
      <button onClick={() => toggleVisibility('SomeTable')}>Expand/Collapse</button>
      { expandedItemId === 'SomeTable' && <div>I am item</div> }
      <button onClick={() => toggleVisibility('SomeOtherTable')}>Expand/Collapse</button>
      { expandedItemId === 'SomeOtherTable' && <div>I am some other item</div> }
      <button onClick={() => toggleVisibility('YetAnotherTable')}>Expand/Collapse</button>
      { expandedItemId === 'YetAnotherTable' && <div>I am yet another item</div> }
    </div>
  )
}

render(
  <App />,
  rootNode
)
    .container {
  display: flex;
  flex-direction: column;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.11.0/umd/react-dom.production.min.js"></script><div id="root"></div>

    p.s. you may notice in above code snippet certain repeating pattern thus you may come up with the way to abstract that behind HOC or custom hook

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search