React.js: Array won't print on screen but console.log() works fine-CodePudding

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:

data: {
  success: Boolean,
  errors: array()
}

import React, {useState} from "react";
import { Link } from "react-router-dom";

const RegisterForm = () => {
    
    const [username, setUsername] = useState("");
    const [password, setPassword] = useState("");
    const [errors, setErrors] = useState([]);
    const [token, setToken] = useState("");

    const handleFormSubmit = (e) => {
        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 => response.json())
        .then(data => {
            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("Success");
            }

        })
    }
        return( 
                <div className="login register">
                    <h1>Register</h1>
                    <form onSubmit={handleFormSubmit}>
                        <label>
                        <i className="fa fa-user-o" aria-hidden="true"></i>
                        </label>
                        <input type="text" name="username" 
                            value={username}
                            onChange={e => setUsername(e.target.value)}
                            placeholder="Username" id="username" required />

                        <label>
                        <i className="fa fa-unlock-alt" aria-hidden="true"></i>
                        </label>
                        <input type="password" name="password"  
                            value={password}
                            onChange={e => setPassword(e.target.value)}
                            placeholder="Password" id="password" required />

                            {errors ? errors.map((item, key) => (
                            //    <li key={key}>{item}</li>
                               console.log(item)
                            )) : null}

                        <input type="submit" value="Register" />
                    </form>

                    <Link className="register-link" to="/"><small>Login &#129046;</small></Link>
                </div>
        )

}

export default RegisterForm;

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: https://prnt.sc/ig6F2O1S1L1L If I try to map through the array and return the values in a list I don't get any errors just nothing happens.

CodePudding user response：

The <li> HTML element is used to represent an item in a list. It must be contained in a parent element: an ordered list (<ol>), an unordered list (<ul>), or a menu (<menu>).

<ul>
       {errors ? errors.map((item, key) => (
                                    <li key={key}>{item}</li>
                                   //console.log(item)
                                )) : null}
</ul>