I can't type in input text using reactjs

Question

i can't change text when typing in input text ! This is my fontend code :

constructor(props) {
    super(props);
    this.state = {
        items: [],
        acc_email: '',
        acc_nom: '',
        acc_prenom: '',
        acc_tel: '',
    };
    this.handleInputChange = this.handleInputChange.bind(this); 
    this.handleSubmit = this.handleSubmit.bind(this);
}

the value of input comes from DB using fetch :

 componentDidMount(){
        const token =  localStorage.getItem('toktok');
        fetch(`${API}/api/account`,{
            method: 'GET',
            headers :{
                'authorization': `Bearer ${token}`, 
            }
        })

        .then(results => {
            return results.json();
        })

        .then(data => {
            this.setState({ items: data.result });
            console.log("account: ",data.result);
            // localStorage.setItem('mymy',  "fiss");
            // console.log(items);
            // console.log(items.length); 

        })
        .catch(err => {
            console.log("erroooor : ",err);
        });    
    }

i don't know what's wrong in this function :

handleInputChange = e => { 
       const name = e.target.name;
       const value = e.target.value;
       this.setState({[name]: value});
       this.setState({ [e.target.name]: e.target.value });
}

and finally, this's the render() that conains all inputs:

<div key={items._id}>
     <input type="text" value={items.email} name="acc_email"  onChange={this.handleInputChange} />
     <input type="text" value={items.nom} name="acc_nom"  onChange={this.handleInputChange} />
     <input type="text" value={items.prenom} name="acc_prenom"  onChange={this.handleInputChange} />
     <input type="text" value={items.tel}  name="acc_tel" onChange={this.handleInputChange} />
     <a className="admin-btn-update" href={`/updateaccount/${items._id}`}>Modifier</a>
</div>

@mitsu, what's items inside your render method?

Hamza El Aoutar
– Hamza El Aoutar

2019-10-26 13:12:16 +00:00
Commented Oct 26, 2019 at 13:12 — Hamza El Aoutar
– Hamza El Aoutar, Commented Oct 26, 2019 at 13:12
this is items var { items} = this.state;

mitsu
– mitsu

2019-10-26 13:24:40 +00:00
Commented Oct 26, 2019 at 13:24 — mitsu
– mitsu, Commented Oct 26, 2019 at 13:24

Pavindu · Accepted Answer · 2019-10-26 13:33:11Z

1

change value to defaultValue as follows.

<input type="text" defaultValue={items.email} name="acc_email"  onChange={this.handleInputChange} />

answered Oct 26, 2019 at 13:33

Pavindu

3,1338 gold badges54 silver badges91 bronze badges

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

Comments

Hamza El Aoutar · Accepted Answer · 2019-10-26 13:25:42Z

0

You are explicitly setting the values of the inputs to be items.email, items.nom.. which makes them controlled inputs, which basically means that it's the component responsibility to control what happens to those inputs.

Since you already implemented the part that updates the component state, all you need to do is to make the inputs values reflect this state:

 <input type="text" value={this.state.acc_email} name="acc_email"  onChange={this.handleInputChange} />
 <input type="text" value={this.state.acc_nom} name="acc_nom"  onChange={this.handleInputChange} />
 <input type="text" value={this.state.acc_prenom} name="acc_prenom"  onChange={this.handleInputChange} />
 <input type="text" value={this.state.acc_tel}  name="acc_tel" onChange={this.handleInputChange} />

answered Oct 26, 2019 at 13:25

Hamza El Aoutar

5,6873 gold badges20 silver badges25 bronze badges

3 Comments

Hamza El Aoutar Over a year ago

At what point you get the values from the DB? can you share that part of the code ? also items is an array so items.email, items.nom .. will be undefined anyway

mitsu Over a year ago

i have a fetch in componentDidMount() that show infos in input

Hamza El Aoutar Over a year ago

In addition to my solution, you need to set the state to those values you get from the DB

Collectives™ on Stack Overflow

I can't type in input text using reactjs

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related