score:1
Accepted answer
your improved code with live demo https://codesandbox.io/s/laughing-sky-kk97b
what need to change <grandchild number={this.props.number} changenumber={this.props.changenumber} value={this.props.data} onchange={this.props.onchange}/>
complete code
class grandchild extends react.component {
constructor(props) {
super(props);
this.handlechange = this.handlechange.bind(this);
}
changenumber = () => {
this.props.changenumber(); //call child method
};
handlechange(e) {
this.props.onchange(e.target.value);
}
render() {
const data = this.props.data;
return (
<div>
<h1>the number is {this.props.number}</h1>
<input type="text" value={data} onchange={this.props.onchange} />
<button onclick={this.changenumber}>increase number by 1</button>
</div>
);
}
}
class child extends react.component {
render() {
return (
<div>
<grandchild
number={this.props.number}
changenumber={this.props.changenumber}
value={this.props.data}
onchange={this.props.onchange}
/>
</div>
);
}
}
class app extends react.component {
constructor(props) {
super(props);
this.state = {
number: 1,
data: ""
};
}
handlechange = e => {
this.setstate({ data: e.target.value });
console.log(e.target.value);
};
changenumber = () => {
this.setstate(prevstate => {
console.log(prevstate, this.state.data);
return {
number: prevstate.number + 1
};
});
};
render() {
const data = this.state.data;
const input = data;
return (
<child
number={this.state.number}
changenumber={this.changenumber}
data={input}
onchange={this.handlechange}
/>
);
}
}
export default app;
Source: stackoverflow.com
Related Query
- React JS : grandparent component's setState method doesn't update state of a grandchild input field onChange event click
- React setState doesnt update state while changing an image
- Why does calling react setState method not mutate the state immediately?
- How to update (re-render) the child components in React when the parent's state change?
- React update state in parent from child components
- React Native / Redux - setState - Cannot update during an existing state transition
- Update child state based on parent state react functional components
- React hooks - setState does not update state properties
- Can't perform a React state update on an unmounted component with fetch POST method
- react stateless child components do not update on state change in parent component
- react setState doesn't change state even when I am using react update add on
- React setState componentDidUpdate React limits the number of .. when trying to update the state based on updated state
- React update parent component state doesn't re-render children components
- setstate cannot update during an state transition - react
- How to run React useEffect only once and property update state with setState
- React using method parameter as an object key to update state
- Cannot update state from render method React
- react js state variable updates automatically without setstate method
- Update a react components state from its parent
- React : can't update my state with setState
- State in React not changing with setState method
- RX + React setState - avoid “Cannot update during an existing state transition”?
- Testing React Components that get state + setState properties passed by parent
- React setState does not update a state array value
- State from react useState is updated when key property is used but requires useEffect or similar method to update otherwise
- useState React Hook set method does not update state immediately in onChange()
- React setState doesn't update the state after submitting input form
- Simple React components won't update after Redux state change
- React state update not working with setState
- Typescript error showing up when update method for state element by using React useState
More Query from same tag
- How to properly add and use third party/npm libraries in Reactjs?
- my login page is not redirecting to event page after login authentication in MERN stack
- React : always the previous state id taken into account, even with prevState and useEffect
- React.js and Isotope.js
- ReactJS - updating state array causes undefined in a different component
- Using React, how can I update state from inside a custom function?
- ReactJS - Module build failed: SyntaxError: Unexpected token react components not rendering
- React pass dom node as input to another component
- className attribute won't take CSSProperties type - React, Material-UI, with TypeScript 4.1
- how to pass parameter to generator function in redux saga from jsx?
- Is this good practice for useEffect async
- Select element placeholder in react
- Class/Functional component, methods within
- how to create login ui and user can choose role after login they redirect to rolebased dashboard in mern stack
- Getting image.map is not a function error while trying to render search list
- I want to log an action everytime a user clicks (highlights) an input field to enter a value into it. What can I do to achieve such functionality?
- Redux ged Id from store to action
- How to apply margin to a div on condition using styled component and react?
- ReactJS + Firestore - Paging with document doesn't seem to work
- Typescript declaration merging to expand or override module type or interface property
- Conditional logic jsx react
- Typescript spfx error: Property 'news' does not exist on type 'Readonly<{}>
- How can I get an empty field when I click on the append using the useFieldArray of React-hook-form?
- Typescript/React ForwardRefExoticComponent assignment with more specific HTMLElement ref fails
- css not scrolling horizontally
- setInterval with updated data in React+Redux
- ERROR in multi ./main.js watch when running webpack
- Hiding the element Responsively in React
- React - components being overwritten when deleted from state (based on there index)
- NavLink not populating active class for nested route