one way binding react
import React, { useState } from “react”;
import Child from “./Child”;
function Parent(props) {
const [text, setText] = useState(“Hello”);
return (
<div>
<h1>{text}</h1>
<Child changeText={(text) => setText(text)} />
</div>
);
}
export default Parent;
import React from “react”;
function Child(props) {
return (
<div>
<button onClick={() => props.changeText(“World”)}>
Change the text
</button>
</div>
);
}
export default Child;one way binding react
In our case, it is easy to identify that the state should reside in the “Parent” component.
const [text, setText] = useState(“Hello”);
Now, what do we do to the “Parent” component? We pass the callback function as a prop from the parent component.
<Child changeText={(text) => setText(text)} />
Now we need a callback function in the “Child” component that is triggered when the button is clicked.
<button onClick={() => props.changeText(“World”)}>two way binding react
class App extends React.Component {
constructor() {
super();
this.state = {value : ''}
}
handleChange = (e) =>{
this.setState({value: e.target.value});
}
render() {
return (
<div>
<input type="text" value={this.state.value} onChange={this.handleChange}/>
<div>{this.state.value}</div>
</div>
)
}
}
ReactDOM.render(<App/>, document.getElementById('app'));Copyright © 2021 Codeinu
Forgot your account's password or having trouble logging into your Account? Don't worry, we'll help you to get back your account. Enter your email address and we'll send you a recovery link to reset your password. If you are experiencing problems resetting your password contact us
