I have a list and edit button when user click edit button opening a new modal. I want to auto populate the selected username mail etc. Server side response is {this.test.name} i give him to input value to auto populate but when user click edit button ı can see the name but ı couldnt change the input how do ı do that ? Code :
<div className = "form__group field">
<input type="input" className="form__field" placeholder="Name" name="name" id="name" value={this.test.name} />
<label htmlFor="name" className="form__label">Adı-Soyadı</label>
</div>
I have a list and edit button when user click edit button opening a new modal. I want to auto populate the selected username mail etc. Server side response is {this.test.name} i give him to input value to auto populate but when user click edit button ı can see the name but ı couldnt change the input how do ı do that ? Code :
<div className = "form__group field">
<input type="input" className="form__field" placeholder="Name" name="name" id="name" value={this.test.name} />
<label htmlFor="name" className="form__label">Adı-Soyadı</label>
</div>
- <div className="form__group field"> <input type="input" className="form__field" placeholder="Name" name="name" id="name" value={this.test.name} /> <label htmlFor="name" className="form__label">Adı-Soyadı</label> </div> – Oğuzhan Commented Feb 27, 2021 at 16:16
- Did you try out what I added in the ments? Consider giving some feedback, greetings – axtck Commented Mar 9, 2021 at 20:33
4 Answers
Reset to default 2If you are using hooks, you could do something like this:
import { useState } from "react"; // import useState
export default function App() {
const [name, setName] = useState(""); // useState hook
// handle change event
const handleChange = (e) => {
e.preventDefault(); // prevent the default action
setName(e.target.value); // set name to e.target.value (event)
};
// render
return (
<div>
<input value={name} type="text" onChange={handleChange}></input>
<p>{name}</p>
</div>
);
}
First, we import the useState() hook to be able to use it, then we use it to store the state for the name value, you can give it an initial value of an empty string (""). In the handleChange() function, we prevent the default action and set the state to e.target.value, this is the input value passed by the event (as (e)). Every time the input changes, the state will update and the page will re-render.
You could check out my sandbox here
- Keep the name in the state:
this.state = {
name: '',
}
(setState when you have it, if you retrieve it only on mount)
- Pass value={this.state.name} to the input.
- Pass onChange={handleNameChange} to the input.
const handeNameChange = (e) => {
setState({ name: e.target.value });
}
You cannot change that input value because you've set the value to this.test.name and did not defined an onChange handler. So what you should do is create a state for your input field and on ponentDidMount, populate this state with data from server.
Then on your input field
this.state = {
val: ''
}
<input value={this.test.name} onChange={e => setState({val: e.target.value})}/>
Maybe there can be a syntax error, because I am used to work with hooks now, but that's pretty much the gist of it
//Declare your states
const [name,setName] = useState('')
const [test,setTest] = useState('')
// fetch the data with use effect
useEffect(() =>{
const fetch = async () =>{
const res = await fetch('http://yourUrl.')
const data = await res.json()
setTest(test)
}}
fetch()
},[test])
// use another useEffect hook to set the input value
// using setTimeout
useEffect(() =>{
setTimeout(()=>{
setName(test.name)
.... // rest of the states, if you have more
}, 1000}
},[name]) //Don't forget to set the dependency array