React JS - Fetch data display in React JS Form

Question

Hello community I want to display fetch data in React JS. The data is already fetched. I want to display in the form. I also tried .map method to display but it throws an error. I am new in React JS.

const UserInfo = () => {
    const [userData, setUserData] = useState([]);
    const { id } = useParams();

    useEffect(() => {
        axios.get(`http://localhost:8080/users/user-info/${id}`)
            .then(res => {
                setUserData(res.data)
                console.log("data fetch", res.data);
            }).catch(e => console.log(e));
    }, []);

    return (
        <>
            <form method='post' autoComplete='off'>
                <div className='register-group_input'>
                    <input type="text" name="name" autoComplete='off'
                        required placeholder='Username' onChange={inputHandler} />
                    {
                        errorField.nameErr.length > 0 && <div className='error-class'>
                            <span className='error'>{errorField.nameErr}</span></div>
                    }
                </div>

                <div className='register-group_input'>
                    <input type="email" name="email" autoComplete='off' required placeholder='Email'
                        onChange={inputHandler} />
                    {
                        errorField.emailErr.length > 0 && <div className='error-class'>       <span className='error'>{errorField.emailErr}</span></div>
                    }
                </div>

                <button type="button" className='register-send_btn' onClick={submitButton}>
                    <span className='register-send_icon'>
                        <img src={send_icon} alt='send_icon' />
                    </span>
                    <span>Save Changes</span>
                </button>
            </form>
        </>
    );
}

export default UserInfo;

I have already tried .map method for data looping but it shows an error so I removed it in the code. Please let me know where I have to put the .map method. Thanks in advance.

Answer 1

return(
   <>
    //your jsx code
     {
         userData &&
         userData.map(field=>{
           return <input key={field.id} type={field.type} name={field.name} />
         })
     }
     // your jsx code
   </>
)