title: How to call Parent function with useState Hook in React?
body: <p>The ideal result is displaying strings when items in the list are clicked.</p>
  
  <p>Here's the Root Component.</p>
  
  <pre><code>const App = () =&gt; {
    const [click, setClick] = useState(null);
    const handleClick = name =&gt; {
      setClick(name);
    };
    return (
      &lt;div&gt;
        &lt;Parent handleClick={handleClick} /&gt;
        {click &amp;&amp; &lt;p&gt;{click} is clicked.&lt;/p&gt;}
      &lt;/div&gt;
    );
  };
  </code></pre>
  
  <p>and Parent Component.</p>
  
  <pre><code>const Parent = ({ handleClick }) =&gt; (
    &lt;div&gt;
      &lt;Child
        name="First Item"
        handleClick={handleClick("First Item is Clicked!")}
      /&gt;
      &lt;Child
        name="Second Item"
        handleClick={handleClick("Second Item is Clicked!")}
      /&gt;
      &lt;Child
        name="Third Item"
        handleClick={handleClick("Third Item is Clicked!")}
      /&gt;
    &lt;/div&gt;
  );
  </code></pre>
  
  <p>and Child Component.</p>
  
  <pre><code>const Child = ({ name, handleClick }) =&gt; &lt;li onClick={handleClick}&gt;{name}&lt;/li&gt;;
  </code></pre>
  
  <p>Also, the code sandbox <a href="https://codesandbox.io/s/create-react-app-template-mmzox?fontsize=14" rel="nofollow noreferrer">link</a>.</p>
  
  <p>I just wondered why the result never is never changed by click.</p>