CODEWITHSUNDEEP
reactjsonchange
mitsu
mitsu

Reputation: 430

I can't type in input text using reactjs

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>

Upvotes: 2

Views: 175

Answers (2)

Pavindu
Pavindu

Reputation: 3112

change value to defaultValue as follows.

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

Upvotes: 1

Hamza El Aoutar
Hamza El Aoutar

Reputation: 5657

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

Upvotes: 0

Related Questions