Answers for "one way binding react"

1

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;
Posted by: Guest on August-10-2021
1

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”)}>
Posted by: Guest on August-10-2021
-1

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'));
Posted by: Guest on July-14-2020

Code answers related to "Javascript"

Browse Popular Code Answers by Language