Given a react controlled component like the following from the react docs:
class NameForm extends React.Component {
constructor(props) {
super(props);
this.state = {value: ''};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({value: event.target.value});
}
handleSubmit(event) {
alert('A name was submitted: ' + this.state.value);
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Name:
<input type="text" value={this.state.value} onChange={this.handleChange} />
</label>
<input type="submit" value="Submit" />
</form>
);
}
}
What is the right way to change NameForm's state.value
from NameForm's parent component? In my specific use case, the user can type in the text input or the user can click some buttons in the parent that are meant to change the value of the input in the child component.
Edit: I should add that I m new to react so I may be overlooking the obvious.