I can't type in input text using reactjs

user_2932096 0
Viewed 118

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>
onchange reactjs
2 Answers

change value to defaultValue as follows.

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

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} />
user_75137180
Related