this is my function that i use in my login component so that when i change my email it changes it value
handleChange =e=>{
//clone
let username = {...this.state.username};
//edit
username = e.currrentTarget.value;
//change state
this.setState({username});
}
and i call this function in the following lines
<form onSubmit ={this.handleSubmit}>
<div className="mb-3">
<label htmlFor="exampleInputEmail1" class="form-label">Email address</label>
<input
value= {this.state.username}
onChange = {this.handleChange}
type="email"
className="form-control"
id="exampleInputEmail1"
aria-describedby="emailHelp"/>
<div id="emailHelp" className="form-text">We'll never share your email with anyone else.</div>
</div>
so i get this errors
Warning: You provided a `value` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultValue`. Otherwise, set either `onChange` or `readOnly`.
at input
at div
at form
at Login (http://localhost:3000/static/js/main.chunk.js:831:5)
at Routes (http://localhost:3000/static/js/vendors~main.chunk.js:33026:5)
at main
at App (http://localhost:3000/static/js/main.chunk.js:238:5)
at Router (http://localhost:3000/static/js/vendors~main.chunk.js:32959:15)
at BrowserRouter (http://localhost:3000/static/js/vendors~main.chunk.js:32474:5)
Okay, so that's not an error. You need to use a connected component in this case.
<input
value={this.state.username}
onChange={this.handleChange}
type="email"
className="form-control"
id="exampleInputEmail1"
aria-describedby="emailHelp"
/>
For some reason, the this.handleChange seems null or undefined.
Show us your full code for debugging. Alternatively, try using:
<input
value={this.state.username}
onChange={handleChange}
type="email"
className="form-control"
id="exampleInputEmail1"
aria-describedby="emailHelp"
/>
Also, remember, there could be some cached error messages, so refresh once.
This is not an error, it's just a warning.
You can either use e.target.value or whatever you're using now.
handleChange = e => {
// also you're not using it right.
// because username is just a string value not an object.
// let username = { ...this.state.username };
// it should be:
let username = this.state.username;
//edit
username = e.currrentTarget.value;
//change state
this.setState({ username });
};
Kindly see the above code block for comments on where you went wrong.