React two way binding

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”)}>

Source: dev.to

Similar codes

12 votes313 views3 answers
Get value of input react
Javascript React
0 vote302 views1 answer
React modal scroll 2 overlapping components
Javascript React
3 votes288 views1 answer
React js image path src from local folder
Javascript React
0 vote303 views1 answer
Image background full width react
Javascript React
0 vote304 views1 answer
How to disable RectButton from react-native-gesture-handler
Javascript React
1 vote291 views1 answer
Reactjs javascript is mobile and desktop
Javascript React
6 votes330 views1 answer
React native activityindicator
Javascript React
1 vote365 views1 answer
React site warning: The href attribute requires a valid address. Provide a valid, navigable address as the href value jsx-a11y/anchor-is-valid
Javascript React
2 votes248 views6 answers
React font-awesome
Javascript React
0 vote280 views1 answer
Dropdown list value react fragment
Javascript React