title: hide and show names using react hooks
body: <ul>
  <li>I am new to react hooks,</li>
  <li>in my app initially, all the names of the users should be hidden.</li>
  <li>later when I click each user it should show the name.</li>
  <li>so I used the show and setshow.</li>
  <li>when I tried to print the values in the browser, I don't see it.<code>return(&lt;div&gt;{show}users Data{setShow}</code></li>
  <li>I wrote click for each user but I am not sure how to hide and show.</li>
  <li>there will be millions of users in my app, so whats the best way to hide and show the name when I click each</li>
  <li>providing my code snippet and sandbox below</li>
  </ul>
  
  <p><a href="https://stackblitz.com/edit/react-t1mdfj?file=index.js" rel="nofollow noreferrer">https://stackblitz.com/edit/react-t1mdfj?file=index.js</a></p>
  
  <pre><code>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---&gt;", e.target);
      setShow(true);
    }
    return(&lt;div&gt;{show}users Data{setShow}
    &lt;div onClick= {showItem}
    //onClick={()=&gt;setShow(true)}
      &gt;user1&lt;/div&gt;
      &lt;div&gt;John&lt;/div&gt;
    &lt;div onClick= {showItem}
    //onClick={()=&gt;setShow(true)}
      &gt;user2&lt;/div&gt;
      &lt;div&gt;Mike&lt;/div&gt;
  
      &lt;div onClick= {showItem}
    //onClick={()=&gt;setShow(true)}
      &gt;user3&lt;/div&gt;
      &lt;div&gt;Mike3&lt;/div&gt;&lt;div onClick= {showItem}
    //onClick={()=&gt;setShow(true)}
      &gt;user4&lt;/div&gt;
      &lt;div&gt;Mik4e&lt;/div&gt;&lt;div onClick= {showItem}
    //onClick={()=&gt;setShow(true)}
      &gt;user5&lt;/div&gt;
      &lt;div&gt;Mike5&lt;/div&gt;&lt;div onClick= {showItem}
    //onClick={()=&gt;setShow(true)}
      &gt;user6&lt;/div&gt;
      &lt;div&gt;Mike6&lt;/div&gt;&lt;div onClick= {showItem}
    //onClick={()=&gt;setShow(true)}
      &gt;user7&lt;/div&gt;
      &lt;div&gt;Mike7&lt;/div&gt;&lt;div onClick= {showItem}
    //onClick={()=&gt;setShow(true)}
      &gt;user8&lt;/div&gt;
      &lt;div&gt;Mike8&lt;/div&gt;
  
    &lt;/div&gt;);
  }
  
  
  
  render(&lt;DataClick /&gt;, document.getElementById("root"));
  </code></pre>