title: React.js: Array won't print on screen but console.log() works fine
body: <p>I have a Register.js component that send a request to an express.js backend and then is validated by express-validator and returns an object that looks like this:</p>
  <pre><code>data: {
    success: Boolean,
    errors: array()
  }
  </code></pre>
  <p>Register.js</p>
  <pre><code>import React, {useState} from &quot;react&quot;;
  import { Link } from &quot;react-router-dom&quot;;
  
  const RegisterForm = () =&gt; {
      
      const [username, setUsername] = useState(&quot;&quot;);
      const [password, setPassword] = useState(&quot;&quot;);
      const [errors, setErrors] = useState([]);
      const [token, setToken] = useState(&quot;&quot;);
  
      const handleFormSubmit = (e) =&gt; {
          e.preventDefault();
  
          const formFields = {
              name: username,
              password: password
          }
  
          const requestOptions = {
              method: 'POST',
              headers: { 'Content-Type': 'application/json' },
             
              body: JSON.stringify(formFields)
          };
  
          fetch('http://localhost:5000/add_user', requestOptions)
          .then(response =&gt; response.json())
          .then(data =&gt; {
              if (data.success === false) {
                  if(data.errors) {
                      return setErrors(data.errors);
                  }
                  if(data.single_error) {
                      return setErrors([...errors, data.single_error]);
                  } 
              }
            
              if(data.success === true) {   
                setErrors([]);
  
                //Redirect to login
                console.log(&quot;Success&quot;);
              }
  
          })
      }
          return( 
                  &lt;div className=&quot;login register&quot;&gt;
                      &lt;h1&gt;Register&lt;/h1&gt;
                      &lt;form onSubmit={handleFormSubmit}&gt;
                          &lt;label&gt;
                          &lt;i className=&quot;fa fa-user-o&quot; aria-hidden=&quot;true&quot;&gt;&lt;/i&gt;
                          &lt;/label&gt;
                          &lt;input type=&quot;text&quot; name=&quot;username&quot; 
                              value={username}
                              onChange={e =&gt; setUsername(e.target.value)}
                              placeholder=&quot;Username&quot; id=&quot;username&quot; required /&gt;
  
                          &lt;label&gt;
                          &lt;i className=&quot;fa fa-unlock-alt&quot; aria-hidden=&quot;true&quot;&gt;&lt;/i&gt;
                          &lt;/label&gt;
                          &lt;input type=&quot;password&quot; name=&quot;password&quot;  
                              value={password}
                              onChange={e =&gt; setPassword(e.target.value)}
                              placeholder=&quot;Password&quot; id=&quot;password&quot; required /&gt;
  
                              {errors ? errors.map((item, key) =&gt; (
                              //    &lt;li key={key}&gt;{item}&lt;/li&gt;
                                 console.log(item)
                              )) : null}
  
                          &lt;input type=&quot;submit&quot; value=&quot;Register&quot; /&gt;
                      &lt;/form&gt;
  
                      &lt;Link className=&quot;register-link&quot; to=&quot;/&quot;&gt;&lt;small&gt;Login &amp;#129046;&lt;/small&gt;&lt;/Link&gt;
                  &lt;/div&gt;
          )
  
  }
  
  export default RegisterForm;
  </code></pre>
  <p>Any ideas why this will console.log but won't print the data on the screen?
  Here is a screenshot of my console.log values: <a href="https://prnt.sc/ig6F2O1S1L1L" rel="nofollow noreferrer">https://prnt.sc/ig6F2O1S1L1L</a>
  If I try to map through the array and return the values in a list I don't get any errors just nothing happens.</p>