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.

this issue solved by myself. but I have an another issue to edit my input field please check out this link stackoverflow.com/questions/71671847/… if you have solution please let me know. — David Smith
– David Smith, Commented Mar 30, 2022 at 8:17

Włodzimierz Korza · Accepted Answer · 2022-03-29 13:32:34Z

1

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

answered Mar 29, 2022 at 13:32

Włodzimierz Korza

563 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

David Smith Over a year ago

no it's not working data come I want only display in respected form.

Włodzimierz Korza Over a year ago

Please show what the request returns

David Smith Over a year ago

this problem is solved thanks

Collectives™ on Stack Overflow

React JS - Fetch data display in React JS Form

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related