Input field value is not updating in react js

Question

I am creating a simple react app for my learning. So I am kind of beginner in react. I am facing one problem that, it is not updating my input field value whenever I am typing something. It keeps as it is whatever are coming from api.

Here is my code.

import React, { useState, useContext, useEffect } from 'react';
import axios from 'axios';
export default function Edit(id) {

const [ name, setName] = useState([]);
const [ email, setEmail] = useState([]);

  useEffect( () =>  {
    const singleData = async () => {
        try{ 
            let response = await axios.get( 'http://localhost:8000/api/show/' + id.match.params.id)
             .then(res => {
              setName(res.data.name);
              setEmail(res.data.email);
            })
            .catch((error) => {
              console.log(error);
            })
        }
        catch(error) {
            console.log(error)
        }
    }
    singleData()
})  
return (
    <div>
        <form>
          <div className="form-group">
            <input type="text" value={name}  onChange={(e) => setName(e.target.value)} className="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email" />
          </div>
          <div className="form-group">
            <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} className="form-control" id="exampleInputPassword1" placeholder="Password" />
          </div>
          <button type="submit" className="btn btn-primary">Submit</button>
        </form>
    </div>
);
}

Asaf Aviv · Accepted Answer · 2021-06-07 17:07:28Z

2

useEffect with no dependencies array will run on every re-render, to run the effect only once when the component mounts add an empty dependencies array

useEffect(() => {
  const singleData = async () => {
    try {
      const { data } = await axios(
        `http://localhost:8000/api/show/${id.match.params.id}`,
      )

      setName(data.name)
      setEmail(data.email)
    } catch (error) {
      console.log(error)
    }
  }
  singleData()
}, [])

edited Jun 7, 2021 at 17:07

answered Jun 7, 2021 at 17:00

Asaf Aviv

11.8k2 gold badges33 silver badges47 bronze badges

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

1 Comment

Fokrule Over a year ago

Thank you so much. I got my answer.

WebbH · Accepted Answer · 2021-06-07 16:59:32Z

1

Without an array dependency, the useEffect runs every time the state is updated. So it effectively just undoes whatever you type and replaces it with another fetch. Assuming you only want it to fetch when the component mounts, add an empty dependency array to your useEffect i.e.

useEffect( () =>  {
const singleData = async () => {
    try{ 
        let response = await axios.get( 'http://localhost:8000/api/show/' + id.match.params.id)
           .then(res => {
            setName(res.data.name);
            setEmail(res.data.email);
          })
          .catch((error) => {
            console.log(error);
          })
      }
      catch(error) {
          console.log(error)
      }
  }
  singleData()
},[])

answered Jun 7, 2021 at 16:59

WebbH

2,4322 gold badges17 silver badges29 bronze badges

1 Comment

Fokrule Over a year ago

This is what exactly I was facing from yesterday. Thank you so much.

Collectives™ on Stack Overflow

Input field value is not updating in react js

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related