title: submit register form of user in react
body: <p>I want to submit this registeration form with unique names.</p>
  <p><strong>First Problem</strong> : I can't seem to map third time. The error shows <strong>array is not iterable</strong>.</p>
  <p><strong>Second Problem</strong> : I cant change the setArray state in (<strong>array not empty</strong>) <strong>section</strong>. I know it is synchronous but I can't seem to find a solution.</p>
  <p>Please give me a solution of if I want to have an immediate value of state after changing setState. I'm stuck in this problem for 3 days.</p>
  <pre><code>import React from 'react';
  
  import { Paper, Typography, TextField , Button, makeStyles} from '@material-ui/core';
  
  import { Link} from 'react-router-dom'
  
  import {useEffect} from 'react';
  
  const useStyle = makeStyles((theme)=&gt;(
  
      {
          formWrapper : {
              display : 'flex',
              width : '100%',
              height : '100%',
              alignItems : 'center',
              justifyContent : 'center'
          },
          paper : {
              padding : '20px',
              margin : '20px'
          },
          textfield : {
              marginLeft : '20px',
              marginBottom : '10px'
          },
          span : {
              margin: '10px',
              marginLeft : '20px'
          }
  
      }
  ))
  
  const Register = () =&gt;{
  
      const classes = useStyle();
      const [name, setName] = React.useState('');
      const [password, setPassword] = React.useState('');
      const [array, setArray] = React.useState([])
  
  
      const submit = (event) =&gt;{
          const obj = {}
          event.preventDefault();
          if(array.length === 0){ // Array is empty
              if((name === null || password === null)||(name === '' || password === '')){ //check if name and password are empty
                  alert('Enter username and password')
                  
              }else{  // not empty then store in localstorage
                  localStorage.setItem('name', name);
                  localStorage.setItem('password',password);
                  
                  obj.id = Math.random();
                  obj.name = localStorage.getItem('name');
                  obj.password = localStorage.getItem('password');
                  setArray(array.push(obj))
                  localStorage.setItem('array',JSON.stringify(array))
                  setName('');
                  setPassword('')
                  return alert('You are registered'); 
                  
              }
          }
          else  // array not empty
          {
              if((name === null || password === null) ||(name === '' || password === '')){
                  alert('Enter username and passsword');
              }
  
              let array2 = JSON.parse(localStorage.getItem('array')).map(user=&gt; user.name)
              var found = array2.includes(name);
              if(found){
                  alert('User name Taken')
                  setName('')
                  setPassword('')
              }
              else{
                  localStorage.setItem('name', name);
                  localStorage.setItem('password',password);
                  obj.id = Math.random();
                  obj.name = localStorage.getItem('name');
                  obj.password = localStorage.getItem('password');
                  setArray([...array,obj])
                  localStorage.setItem('array',JSON.stringify(array))
                  console.log(array);
                  setName('');
                  setPassword('')
                  return alert('You are registered'); 
  
              }
              
          }
      }
  
      return(
          &lt;div&gt;
              &lt;div className = {classes.formWrapper}&gt;
                  &lt;Paper elevation={3} className = {classes.paper} &gt;
                  &lt;Typography variant=&quot;h5&quot; style = {{ textAlign : 'center'}}&gt;Register&lt;/Typography&gt;
                  &lt;form noValidate autoComplete=&quot;off&quot;&gt;
                      &lt;TextField id=&quot;username&quot; className={classes.textfield}  value = {name} name = &quot;username&quot;  label=&quot;Username&quot; onChange = {e=&gt;setName(e.target.value)} /&gt;
                      &lt;br /&gt;
                      &lt;TextField id=&quot;password&quot; className={classes.textfield}  value = {password} name = &quot;password&quot;  label=&quot;Password&quot; onChange = {e=&gt;setPassword(e.target.value)} /&gt;
                      &lt;br /&gt;
                      &lt;span className ={classes.span}&gt;&lt;Link to=&quot;/&quot;&gt;Sign In&lt;/Link&gt;&lt;/span&gt;
                      &lt;br /&gt;
                      &lt;Button variant=&quot;contained&quot; color=&quot;secondary&quot; style = {{width : '100%', marginTop : '10px'}} onClick = {submit} &gt;Register &lt;/Button&gt;
                  &lt;/form&gt;
                  &lt;/Paper&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      
      )
  }
  
   
  export default Register;
  </code></pre>