Tell us what’s happening:
I am confused with processes behind the scenes.
Are bellow statements correct?
After user makes an input:
- States of HTML DOM are updated.
- React’s components are reading HTML DOM and are updating React’s own DOM (and vice versa).
- HTML DOM is located in the WEB browser.
- React’s own DOM is located where?
- Components we’re writing suppose to facilitate the communication between HTML DOM (located in the WEB browser) and React’s own DOM.
If above is not correct, I kindly ask for correct answers.
Many, many thanks in advance.
Your code so far
class ControlledInput extends React.Component {
constructor(props) {
super(props);
this.state = {
input: ''
};
// Change code below this line
// Change code above this line
}
// Change code below this line
handleChange() {
this.setState(event=> {
input: event
}
)
}
// Change code above this line
render() {
return (
<div>
{ /* Change code below this line */}
{ /* Change code above this line */}
<h4>Controlled Input:</h4>
<p>{this.state.input}</p>
</div>
);
}
};
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.141 Safari/537.36.
Challenge: Create a Controlled Input
Link to the challenge:
