title: React - How can I set my parent state using child component, using function structures (not classes)
body: <p>I'm trying to change the state of parent component using a button in my child component by passing a function &quot;setName&quot; to the child. I read a lot of examples but they seemed to all use classes, where I'm trying to use functions since the React doc on hooks seems to promote functions over class.</p>
  <p>In my parent, I have</p>
  <pre><code>  let [Name, setName] = useState(&quot;John Doe&quot;);
  </code></pre>
  <p>And I pass the setName method by using JSX in my return statement:</p>
  <pre><code>&lt;Child childSetName=({setName})/&gt;
  </code></pre>
  <p>In my child component I have</p>
  <pre><code>export const Child = ({childSetName}) =&gt; {
  
  return(
      &lt;a onDoubleClick={()=&gt;{childSetName(&quot;Mary Ann&quot;)}}&gt;
          Click me
      &lt;/a&gt;
  )}
  </code></pre>
  <p>I got a typeError: childSetNameis not a function.</p>
  <p>I also read <a href="https://stackoverflow.com/questions/35537229/how-to-update-parents-state-in-react">this popular question</a>, but it uses class, not functions as all the hooks example from React docs are.</p>
  <p>How can I set my parent state using child component, both retain their function structures not classes.</p>