title: How to validate a child's component data from the parent without useEffect on each input
body: <p>I have a reactjs component called payment that has and addressForm child componenet.</p>
  <p>Now in my payment I have a next button that user needs to press to move to the next step but before moving the parent needs to validate the addressFrom's data.</p>
  <p>Payment (PARENT)</p>
  <pre><code>&lt;div ref={sliderRef} className='slider'&gt;
                  &lt;AddressForm 
                    callback={(data) =&gt; registerAddress(data)}
                    setCanGoNext={val =&gt; setCanGoNext(val)}/&gt;
                  &lt;Paymentform/&gt;
                  &lt;InformationalForm/&gt;
                &lt;/div&gt;
  </code></pre>
  <p>AddressForm (CHILD)</p>
  <pre><code>&lt;div className=&quot;input-container-parent&quot;&gt;
          &lt;div className=&quot;input-container-left&quot;&gt;
            &lt;Input label=&quot;Country&quot; value={country} setValue={e =&gt; setCountry(e)}/&gt;
            &lt;Input label=&quot;County&quot; value={county} setValue={e =&gt; setCounty(e)}/&gt;
            &lt;Input label=&quot;City&quot; value={city} setValue={e =&gt; setCity(e)}/&gt;
            &lt;Input label=&quot;Street name and number&quot; value={streetAndNumber} setValue={e =&gt; setStreetAndNumber(e)}/&gt;
            &lt;Input label=&quot;Zipcode&quot; value={zipcode} setValue={e =&gt; setZipcode(e)}/&gt;
          &lt;/div&gt;
          &lt;div className=&quot;input-container-right&quot;&gt;
            &lt;Input label=&quot;Person of contact&quot; value={person} setValue={e =&gt; setPerson(e)}/&gt;
            &lt;Input label=&quot;Phone number with contry prefix&quot; value={phone} setValue={e =&gt; setPhone(e)}/&gt;
            &lt;Input label=&quot;Email address&quot; value={email} setValue={e =&gt; setEmail(e)}/&gt;
            &lt;Input label=&quot;Adittional info&quot; value={additionalInfo} setValue={e =&gt; setAdditionalInfo(e)}/&gt;
            &lt;Input label=&quot;Note&quot; value={note} setValue={e =&gt; setNote(e)}/&gt;
          &lt;/div&gt;
          &lt;div&gt;
  </code></pre>
  <p>Now my question is: can I validate somehow this data from the parent ONLY on click of the button 'next'. So I don't have to useEffect in child with all the child's properties to check if the form is valid or not</p>