title: How can I send data from a child to a parent functional component in ReactJS?
body: <p>I am trying to build a website to convert recipes to a different number of servings. I am using React. I have setup a component to take the number of original servings, new number of servings, and number of ingredients. It will not update in the App.js file when I change the value in the PreInputs component.</p>
  <p>App.js:</p>
  <pre><code>const App = () =&gt; {
    //define variables using states
    const [numIngredients, setNumIngredients] = useState(5);
    const [originalServings, setOriginalServings] = useState(8);
    const [newServings, setNewServings] = useState(4);
    
    //create handling functions for the variables
    const handleNumIngredients = (num) =&gt; {
      setNumIngredients(num);
    }
  
    const handleOriginalServings = (num) =&gt; {
      setOriginalServings(num)
    }
  
    const handleNewServings = (num) =&gt; {
      setNewServings(num);
    }
  
    
    return (
    &lt;div&gt;
      &lt;Header title=&quot;test&quot;/&gt;
      &lt;PreInputs changeNumIngredients={handleNumIngredients} changeOriginalServings={handleOriginalServings} changeNewServings={handleNewServings}/&gt;
      &lt;h1&gt;{originalServings}&lt;/h1&gt;
    &lt;/div&gt;
    );
  }
  
  ReactDOM.render(&lt;App /&gt;, document.getElementById('root'))
  </code></pre>
  <p>PreInputs.js:</p>
  <pre><code>import React, { useCallback, useState } from 'react';
  
  export const PreInputs = (props) =&gt; {
      const numOriginalServings = useState(0)
  
      const handleOriginalServingsChange = (e) =&gt; {
          const originalServings = e.target.value;
          props.changeOriginalServings(originalServings)
      }
      
      return (
          &lt;div className='pre-inputs'&gt;
              &lt;form&gt;
                  &lt;label&gt;Original Servings: &lt;/label&gt;
                  &lt;input value={numOriginalServings} onChange={handleOriginalServingsChange} type='number' /&gt;
                  &lt;button&gt;&lt;/button&gt;
              &lt;/form&gt;
              &lt;h1&gt;Placeholder&lt;/h1&gt;
          &lt;/div&gt;
      );
  }
  </code></pre>