React JS - Fetch data display in React JS Form - reactjs

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
</>
)