title: How do I not allow submission for empty fields from a child component? More explanation below
body: <p>I have this sample codesandbox I made, though, in my original one there were already a lot of values. I only recreated the problem that I had.</p>
  <p>Codesandbox: <a href="https://codesandbox.io/s/youthful-firefly-40mig3?file=/src/App.js" rel="nofollow noreferrer">https://codesandbox.io/s/youthful-firefly-40mig3?file=/src/App.js</a></p>
  <p>I have this in my <strong><code>App.js</code></strong> where I define some of my needed values and then pass it to 2 other components.</p>
  <pre><code>  &lt;div className=&quot;App&quot;&gt;
        {/* some codes here */}
        &lt;h1&gt;App page&lt;/h1&gt;
        Initial Amount: 1000
        &lt;br /&gt;
        Total Amount: {totalAmount}
        &lt;br /&gt;
        ----------------------------------------------------------
        &lt;h6&gt;Passing the total amount and the second input here&lt;/h6&gt;
        &lt;Second input2={input2} setInput2={setInput2} /&gt;
        ----------------------------------------------------------
        &lt;h6&gt;Third here&lt;/h6&gt;
        &lt;Third totalAmount={totalAmount} /&gt;
      &lt;/div&gt;
  </code></pre>
  <p>I have this <code>Second.js</code> where I compute the <code>totalAmount</code>. This is the problem that I encountered. The <code>required</code> is not being recognized here. I just wanted to stop the user from submitting the form if this field is empty. Are there other ways where it would not submit if a certain field is empty or just leave the input field to 1 if it is empty?</p>
  <pre><code>const Second = ({ input2, setInput2 }) =&gt; {
    return (
      &lt;div&gt;
        Second here
        &lt;form&gt;
          &lt;input
            fullWidth
            value={input2}
            onChange={(e) =&gt; setInput2(e.target.value)}
            required
          /&gt;
        &lt;/form&gt;
      &lt;/div&gt;
    );
  };
  export default Second;
  </code></pre>
  <p>This is the <strong><code>Third.js</code></strong> where I passed down the <code>totalAmount</code> and added more values such as the <code>name</code> and <code>age</code>. In here the <code>name</code> and <code>age</code> are being recognized. This is also where I submit everything here.</p>
  <pre><code>const Third = ({ totalAmount }) =&gt; {
    const [name, setName] = useState(&quot;&quot;);
    const [age, setAge] = useState(0);
  
    const handleSubmit = (e) =&gt; {
      e.preventDefault();
      try {
        console.log(name, age, totalAmount);
      } catch (err) {
        console.log(err);
      }
    };
    return (
      &lt;div&gt;
        Third here
        &lt;form onSubmit={handleSubmit}&gt;
          &lt;label&gt;Name&lt;/label&gt;
          &lt;input
            fullWidth
            value={name}
            onChange={(e) =&gt; setName(e.target.value)}
            required
          /&gt;
          &lt;br /&gt; &lt;br /&gt;
          &lt;label&gt;Age&lt;/label&gt;
          &lt;input
            fullWidth
            value={age}
            onChange={(e) =&gt; setAge(e.target.value)}
            required
          /&gt;
          &lt;br /&gt; &lt;br /&gt;
          &lt;button type=&quot;submit&quot;&gt;submit&lt;/button&gt;
        &lt;/form&gt;
      &lt;/div&gt;
    );
  };
  export default Third;
  </code></pre>