How to Change pre filled input values

Question

I new to React. I have two input fields which are filled when the pages loads via axios but when I want to change the Values I am unable to change them even I can not type anything on them.

function MainView() {
    const [InputFields, setInputFields] = useState({
        name: "",
        fullURL: "",
    });

    const changeHandler = (e) => {
        setInputFields({
            ...InputFields,
            [e.target.name]: e.target.value,
        });
    };

    const [links, setLinks] = useState([]);
    const getLinks = () => {
        axios.get('../sanctum/csrf-cookie').then(response => {
            axios.get("/userlinks/getdata").then((res) => {
                console.log(res);
                setLinks(res.data);
            }).catch((err) => {
                console.log(err);
            });
        });
    };

    useEffect(() => {
        getLinks();
    }, []);

    return (<div>
            {links.map((link) => {
                return (<div className="card" key={link.id}>
                    <form>
                     <input className="form-control" value={link.name} type="text" name="name" placeholder="name" onChange={changeHandler} />
                    <input className="form-control" value={link.fullURL} type="text" name="fullURL" placeholder="fullURL" onChange={changeHandler} />
                    </form>
                </div>);
            })}
    </div>
    );
}

export default MainView;

tsamridh86 · Accepted Answer · 2022-01-23 03:12:00Z

1

This happens because in your onChange method, you are changing InputFields variable, where as your getLinks method changes links variable, which is being rendered on the screen.

If you want to set an initial value, and then allow the user to change it, change your input to :

<input className="form-control" defaultValue={link.name} 
 value={InputFields.name} type="text" name="name" placeholder="name" onChange={changeHandler} />

Likewise change for your other input, if you do not want the user to change the value later on, it's often better to add disable in the input to avoid confusing people. 🙂

I know that this has been done so that you can create a minimal reproducible example for us, but I would have directly called setInputFields in the axios.get section to avoid this problem in the first place, however, if not possible, use the defaultValue and value as I've shown above.

answered Jan 23, 2022 at 3:12

tsamridh86

1,49612 silver badges23 bronze badges

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

6 Comments

ERaufi Over a year ago

Thanks a lot for your fast replay now I get this warring Warning: MainView contains an input of type text with both value and defaultValue props. Input elements must be either controlled or uncontrolled (specify either the value prop, or the defaultValue prop, but not both). Decide between using a controlled or uncontrolled input element and remove one of these props

tsamridh86 Over a year ago

Yes. This warning makes sense, as in the first render you pull the values from the url and slap it on there, and do not care about it anymore ( remember than your InputFields variable is still empty ) and once you start typing in the values, InputFields start to change and it's value gets reflected in the screen render, this is what the warning meant

tsamridh86 Over a year ago

This is also the reason why I choose my alternative solution instead, you should do a through testing on your end and see if all the cases are satisfied, and then decide upon dealing with the warning or ignoring it.

ERaufi Over a year ago

so instead of links I should use InputFields in axios the way it would be better?

tsamridh86 Over a year ago

yes, but it might cause breaking changes in your application, so give it a through test

|

Collectives™ on Stack Overflow

How to Change pre filled input values

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related