score:1
Accepted answer
you can define onchange
event handler in the child component, set child's set there and call the callback passed from the parent in props
from the function. here is example code:
class child extends react.component {
constructor(props) {
super(props);
this.onselectchange = this.onselectchange.bind(this);
}
onselectchange(e) {
const newvalue = e.target.value;
this.props.onchange(newvalue );
// set child state here
this.setstate({searchid : newvalue })
}
render() {
return (
<div>
<select onchange={this.onselectchange}>
<option value="1">1</option>
<option value="2">2</option>
</select>
</div>
)
}
}
class parent extends react.component {
constructor(props) {
super(props);
this.somehandler = this.somehandler.bind(this);
}
somehandler(childvalue) {
console.log(childvalue);
this.setstate({ value: childvalue })
}
render() {
return <child onchange={this.somehandler} />
}
}
here is a working example on codesandbox.
Source: stackoverflow.com
Related Query
- Update state and call parent onChange handler simultaneously from child component during onChange event
- Update parent state from child component and re-render this child when parent state is update
- Update state on Parent component from input in Child using props and useState Hook
- update react child component's state using props received from an async api call made in the parent component
- Update Parent State from Child Component and send back response to child
- Can we pass setState as props from one component to other and change parent state from child component in React?
- How to update parent state from child component in React + send a paramater
- How to make React.js fetch data from api as state and pass this state data from its parent to child component
- How to make an http call in parent component to setState and then send the state to all child components?
- How to update the correct state value in a parent component that gets its value from a child component using hooks in react?
- Update parent component State from child component in react js
- Unable to pass props from parent to child and save it in state of child component
- Pass state as props from parent to child and then update parent from child onSubmit
- How to call method in child component only once after parent state update
- Update parent state from child component
- How to pass a prop back from child to parent in onclick handler and then to another component in React?
- Using useReducer to dispatch action from one child component and update state in another child component
- Update parent state based on props and onClick from child in React
- How to call function in parent class component by onchange event from child component in React?
- React update child component state from parent using getDerivedStateFromProps
- Update Parent Component State from Child Component
- How to update state of parent from child component in reactJS
- how to update parent state in child component and pass to parent state back?
- Not sure how to update parent state from the child component
- React update child state from parent component
- React Updating parent state with API call and then update child
- How to render and update child elements coming from a parent component in React?
- State isn't updated on handler call from child to parent
- How to update react component state from one component to another, and call any functions from any component
- How can I update state twice in a Parent component from a Child component?
More Query from same tag
- some JSON data is not accessible using dot notation, craziest thing
- When the value is not modified normally in the state using redux
- Best way to consume javascript data blocks with react or web components?
- How to add a new key value to react js state array?
- why does setPaintProperty with fill-color and stops add extra colors to layers in mapbox-gl?
- How to pass a state to another state in same component using functional component in React
- In React.js, how would I render a component from a string representation of a component?
- Scrolling to a row
- How can I have a sticky Header in react js and using Tailwind style
- How to make API request from react client to express server running on the Heroku platform
- Why the below code is not executing for every value of i in for loop?
- auth component as middleware in react
- Import .less variables to use within React Styled Components
- Seeing unknown typescript error in JSConfig.json file
- Axios promise not resolving, always pending
- Delete function in React js Functional Component
- How to pass a socket connection around in Flux?
- Karma + Browserify + Jasmine + Istanbul + React coverage
- Semantic UI (React) map accordion in every table row
- Rails DELETE route not working properly / not calling the controller function
- Toggling the value when click using React Context
- REACT: concatenate stateful objects to array
- how to use modal in reactstrap v.9 (bootstrap v.5)?
- How to prefer a css file over another?
- how to define ref type by flowtype?
- Animate svg rect on button click
- emotion-js on Create React App - 'jsx' is defined but never used
- GraphQL query to filter GraphCMS posts
- How to use an Electron <webview> tag in TypeScript?
- How can i specific expanded data row in react-table?