Show and Hide table through a button click React Js-CodePudding

Basically i have 3 tables and these tables have 3 titles on the top . Each time i click this title i want to hide the table and show it back . How can i make that happen . I added a on click to each of the titles , but i can't hide only the table which belongs to this button , it's hiding all the tables ?. Keep in ming they are all rendered through

Is there any way to find like if the indexes of the button with the indexes of the table match , then display : none ; or something , i tried doing it with dom.querySelectorAll , and mapped through the array but it's hiding everything.

CodePudding user response：

set an array using useState

tables = [true,true,true]

Only display tables for which the index is true. example in the return ()

{tables[0] ? <Table1/> : null}
{tables[1] ? <Table2/> : null}{tables[2] ? <Table3/> : null}

Then, use onClick to set the state of the tables array. To dynamically render the tables. ex. onClick={()=> set table index to false}

CodePudding user response：

try this

  
  const [table1, settable1] = useState(true);
  const [table2, settable2] = useState(true);
  const [table3, settable3] = useState(true);

async function table1(){
settable1(!table1)
           }

async function table2(){
settable2(!table2)
           }
async function table3(){
settable3(!table3)
           }


return (
{table1== true ? <Table1/> : null}
{table2== true ? <Table1/> : null}
{table3== true ? <Table1/> : null}
)