score:0
because, this.setstate (...)
is asynchronous function. if you want to call this.matrix.current.changeelements(this.state.integers);
function after updated the parent state, set the second argument of this.setstate (...)
to the callback function.
this is the fixed code
class inputform extends component {
...
addintegers = v => {
const newintegers = this.state.integers.slice();
newintegers.push(v);
this.setstate({ integers: newintegers }, () => { // use callback
this.matrix.current.changeelements(this.state.integers);
});
};
...
class matrix extends component {
constructor(props) {
super(props);
this.state = {
rows: 0,
cols: 0,
elements: this.props.value || [[]] // try like this.
};
}
changeelements = props => {
// this.setstate({ elements: this.props.values }); // wrong
this.setstate({ elements: props.values }, () => {
console.log(this.state.elements);
}); // maybe like this
};
this is a simple example.
class app extends react.component {
constructor(props) {
super(props);
this.child = react.createref();
this.state = {
value: "aaa",
}
};
updatechild = () => {
this.setstate({value: "bbb"}, () => {
this.child.current.changeelements(this.state.value);
})
};
render() {
return (
<div>
<button onclick = {this.updatechild} > click here </button>
<child ref={this.child} values={this.state.value} />
</div>
);
}
}
class child extends react.component {
constructor(props) {
super(props);
this.state = {
value: this.props.values,
};
}
changeelements = value => {
this.setstate({ value });
console.log(value);
};
render() {
console.log(this.state.value)
return (
<div>{this.state.value}</div>
);
}
}
reactdom.render( < app / > , document.getelementbyid('app'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"></div>
score:1
in the parent component you are passing values as props
<matrix ref={this.matrix} values={this.state.integers} />
while in the matrix you are accessing:
constructor(props) {
super(props);
this.setstate({ elements: this.props.value });
}
where this.props.value
is not there, you should access the this.props.values
Source: stackoverflow.com
Related Query
- React Child Component Not Updating After Parent State Change
- Updating state with props on React child component
- Updating Parent Component State from Child Component with UseState React Hook
- Problem updating parent state from child component in React
- React 16.8 hooks - child component won't re-render after updating parent state
- Updating React child component after state change
- Updating a React state from child component function
- React child component not fetching props and updating state
- Meteor react state passed to child component not updating
- React state updating through child component
- State of React child doesn't update after updating parent component
- Updating child component state in react
- React - Updating Parent State from Child Form Component
- React - Getting collection from Firebase and updating state to render a child component
- React child component not rerendering when updating parent component state
- state not updating in child component - react js
- React js change child component's state from parent component
- onChange event for React child component to update state
- React component not updating when store state has changed
- Why is my react component not updating with state updates?
- Updating React component state in Jasmine Test
- Updating the react component state when a global variable changes
- react is not updating functional component state on input change
- How to stop re render child component when any state changed in react js?
- How do I pass all state variables inside react hooks to my child component
- React, updating state in child component using props after async call in parent component
- React Child with useEffect() not updating on Parent State Change
- Update a react state (array of objects) from a child component
- Sharing state from parent to child component in React
- React child component not re-rendering on parent state change
More Query from same tag
- Allow blank spaces in ag-grid filter
- React useState hook only updates once onClick
- How to access props within a component?
- Firebase RDB presence not working as expected
- Configure existing project on reactJS
- VueJS mustache data binding not working. How can I debug this?
- React: Convert a component into a HTML & CSS String
- Tailwindcss default hide left side drawer on mobile but show when toggle button click
- ReactJS .... map() is not a function
- react toggle menu, styling the button different on click
- Conditionally render useEffect fetch React
- ASP.NET Core 2.1 Web application with React.Aspnet error when running as Docker application
- POST http://localhost:3000/undefined/post 404 (Not Found)
- State Change Causing Sidebar Reload
- Storing long text-based paragraphs or headings in React.js
- React - edit profile -first display read only fields and click on edit make fields editable
- How can I redirect to auth0 without clicking on the Log In button in react using the new auth0-spa.js?
- reactjs formik file upload
- React - Maximum update depth exceeded / Cannot update a component while rendering a different component
- Can't read the multiple lang file in React Intl + TypeScript
- Get url into image src using react
- Archilogic embed floor plan with next js project
- React authentication not able to redirect to the right page
- React UseHookForm set focus when using useFieldArray
- Pass updated state of parent to child component in React JS
- HTML rendering on server with Node.js
- Using multiple api calls with set state under UseEffect with one dependency, how to prevent extra re render of child components?
- React: state updates only once on click
- Render item from an array after a fixed interval in React
- Why my check box isn't updated after click?