- I'm just starting to work with React hooks,
- In my app, I want all user names to be hidden by default.
- However, when I click on each user, their name should be displayed.
- To accomplish this, I am using the show and setShow functions.
- Although when I try to display the values in the browser, they do not appear as expected.
return(<div>{show}users Data{setShow} - I have set up a click function for each user, but I am unsure how to properly hide and show the names.
- Since there will be millions of users in my app, I am looking for the most efficient way to toggle the visibility of each name on click.
- Below you can find my code snippet and a sandbox link for reference
https://stackblitz.com/edit/react-t1mdfj?file=index.js
import React, { Component, useState } from "react";
import { render } from "react-dom";
import Hello from "./Hello";
import "./style.css";
function DataClick(){
const [show, setShow]= useState(false);
function showItem(e){
console.log("e--->", e.target);
setShow(true);
}
return(<div>{show}users Data{setShow}
<div onClick= {showItem}
//onClick={()=>setShow(true)}
>user1</div>
<div>John</div>
<div onClick= {showItem}
//onClick={()=>setShow(true)}
>user2</div>
<div>Mike</div>
<div onClick= {showItem}
//onClick={()=>setShow(true)}
>user3</div><div>Mike3</div>
<div onClick= {showItem}
//onClick={()=>setShow(true)}
>user4</div><div>Mik4e</div>
<div onClick= {showItem}
//onClick={()=>setShow(true)}
>user5</div><div>Mike5</div>
<div onClick= {showItem}
//onClick={()=>setShow(true)}
>user6</div><div>Mike6</div>
<div onClick= {showItem}
//onClick={()=>setShow(true)}
>user7</div><div>Mike7</div>
<div onClick= {showItem}
//onClick={()=>setShow(true)}
>user8</div><div>Mike8</div>
</div>);
}
render(<DataClick />, document.getElementById("root"));