title: why did not worked validation in react component
body: <p>problem image is here--&gt;
  <a href="https://postimg.cc/4mYB30C6" rel="nofollow noreferrer">https://postimg.cc/4mYB30C6</a></p>
  <p><strong>There are two problems</strong></p>
  <p><strong>One:</strong> warning me the controlled component to uncontrol though I use handler event;</p>
  <p><strong>Second:</strong> js  include  function 1st time define 2nd-time type error.</p>
  <p>I cannot find my problem I use two-time value and define it with let but they told im not to define 2nd why include showing me type error</p>
  <p><img src="https://i.stack.imgur.com/0OK0d.png" alt="" /></p>
  <pre><code>import React,{useState} from 'react'
  //component
  export default function Form() {
      const [allValues,setAll] = useState({
      name:&quot;&quot;,
      email:&quot;&quot;,
      pass:&quot;&quot;,
      nameerr:&quot;&quot;,
      passerr:&quot;&quot;,
      emailerr:&quot;&quot;,
      
      });
      //valide function
    let valide= ()=&gt;{
        let nameerr;
        let passerr;
        let emailerr;
       if(!allValues.name)
       {
          nameerr='your name invalid';
       }
       if(!allValues.email.includes('@'))
       {
           emailerr='your Email invalid';
       }
       if(!allValues.pass.match(1))
       {
           passerr='your pass invalid';
       }
       if(nameerr||emailerr||passerr)
       {
         let newValue={nameerr,emailerr,passerr};
           setAll(newValue);
          return false;
       }
       return true;
    
    }
    //Onchange handaler
    const  handalChange=(e)=&gt;{
         setAll({...allValues,[e.target.name]:e.target.value});
         
          
      }
   //Onsubmit handaler
   const handalSubmit=(e)=&gt;{
          e.preventDefault();
         
       const NewValide=valide();
         if(NewValide!==false){
        let value={...allValues,  
        nameerr:&quot;&quot;,
        passerr:&quot;&quot;,
        emailerr:&quot;&quot;,}
          setAll(value);
          console.log(value)   
         }
      else{
      valide();
    
     
      }
    }
  
    return (
      &lt;form onSubmit={handalSubmit} &gt;
                 &lt;div&gt;
                    Name: &lt;input
                          placeholder=&quot;name&quot; 
                          type=&quot;text&quot;
                          name=&quot;name&quot;
                          value={allValues.name}
                          onChange={handalChange}
                     /&gt;
                     &lt;div&gt;{allValues.nameerr}&lt;/div&gt;
                     &lt;div&gt;
                     Email: &lt;input
                          placeholder=&quot;email&quot; 
                          type=&quot;text&quot;
                          name=&quot;email&quot;
                          onChange={handalChange}
                          value={allValues.email}
                     /&gt;
                     &lt;/div&gt;
                     &lt;div&gt;{allValues.emailerr}&lt;/div&gt;
                     &lt;div&gt;
                    password: &lt;input
                          placeholder=&quot;password&quot; 
                          type=&quot;password&quot;
                          name=&quot;pass&quot;
                          onChange={handalChange}
                          value={allValues.pass}
                     /&gt;
                     &lt;/div&gt;
                     &lt;div&gt;{allValues.passerr}&lt;/div&gt;
                 &lt;/div&gt;
                &lt;input type=&quot;submit&quot; value=&quot;Submit&quot;/&gt;
           &lt;/form  &gt;
    )
  }
  </code></pre>