Nothing displays when I want to edit in ReactJS

Viewed 43

When I want to edit my input nothing displays and I have this error

Warning: A component is changing a controlled input to be uncontrolled. This is likely caused by the value changing from defined to undefined, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info: https://reactjs.org/link/controlled-components input form

But I have output in my console.log.

import axios from "axios";
import React, { useEffect } from "react";
import { useParams } from 'react-router-dom'
import { useState } from "react";

const Edituser = () => {
    const { id } = useParams();

    const [user, setUser] = useState({
        name: "",
        email: "",
        password: "",
        c_password: "",
        role: ""

    });

    const { name, email, password, c_password, role } = user;
    const onInputChange = e => {
        setUser({ ...user, [e.target.name]: e.target.value })

    };
    useEffect(() => {

        Updaate();
    },
        []
    );

    const Updaate = async () => {
        const response = await axios.get(`http://127.0.0.1:8000/api/edit-user/${id}`);
        setUser(response.data)
        console.log(response.data)
    };
    const Updateuser = async e => {
        e.preventDefault();
        await axios.put(
            `http://127.0.0.1:8000/api/update-user/${id}`, user
        );
    };
    return (
        <form className="register-form">
            <div className="head-register" >
                <h3>register</h3>
            </div>
            <label htmlFor="name">Username</label>
            <input name="name" onChange={e => onInputChange(e)} value={name} ></input>
            <h1>hello</h1>
        </form>
    );
}
export default Edituser;
1 Answers

change your input tag like this:

<input name="name" onChange={e => onInputChange(e)} value={name} />

instead of

<input name="name"  onChange={e => onInputChange(e)} value={name} ></input>
Related