title: Cleaner way to pass state variables and methods to child components in React?
body: <p>Beginner to React, I have multiple state variables:</p>
  <pre><code>function ParentComp(){
        const [firstName, setFirstName] = useState(&quot;&quot;)
        const [lastName, setLastName] = useState(&quot;&quot;)
        const [address, setAddress] = useState(&quot;&quot;)
  
        return &lt;p&gt;Bonjour&lt;/p&gt;
  }
  </code></pre>
  <p>Of course I can pass them to the child components like this:</p>
  <pre><code>&lt;ChildComponent firstName = {firstName} setFirstName = {setFirstName}
                  lastName = {lastName} setLastName = {setLastName}
                  address = {address} setAddress = {setAddress}/&gt;
  </code></pre>
  <p>But I have many more state variables, and actually I want to pass them to the child of the ChildComponent. Is there a way to wrap them in a array or object somehow? I googled and found &quot;context api&quot; but I'd like a more beginner friendly solution.</p>