score:4
is it ok to update react components state by calling its member function from controller?
yes, you can do that but it's unnecessary. usually you want to update the child state by passing down props from the parent. i've made some examples of how you can update a child from the parent below.
example 1:
in this example, you don't need any state for the child. the parent manages the state and passes down any changes to the child via props. this is the recommended approach.
parent
class parent extends react.component {
constructor() {
super();
this.state = {text: "hello"};
}
render() {
return <child data={this.state.text} />;
}
}
child
class child extends react.component {
render() {
return <span>{this.props.data}</span>;
}
}
example 2:
in this example, we use two states, one for each component. this is unnecessary for this implementation, but you can still do it. when the child mounts, we set the state to whatever the data prop is set to. we update the state whenever the child component receives props with componentwillreceiveprops()
.
parent
class parent extends react.component {
constructor() {
super();
this.state = {text: "hello"};
}
render() {
return <child data={this.state.text} />;
}
}
child
class child extends react.component {
constructor(props) {
super(props);
this.state = {childtext: props.data};
}
componentwillreceiveprops(nextprops) {
if(nextprops.data !== this.props.data)
this.setstate({childtext: data});
}
render() {
return <span>{this.state.childtext}</span>;
}
}
example 3:
in this example, the child component is given a ref
which we then can use to trigger a child function from parent. usually this is done in the reverse order (triggering a function from child to parent), but you can still do this if you want. this is the more manual approach and similar to what you asked.
parent
class parent extends react.component {
constructor() {
super();
this.state = {text: "hello"};
}
triggerupdate = () => {
this.child.component.update(this.state.text);
}
render() {
return <child ref={(el) => this.child = el} data={this.state.text} />;
}
}
child
class child extends react.component {
constructor(props) {
super(props);
this.state = {childtext: props.data};
}
update = (text) => {
this.state({childtext: text});
}
render() {
return <span>{this.state.childtext}</span>;
}
}
Source: stackoverflow.com
Related Query
- Update a react components state from its parent
- React update state in parent from child components
- Update child state based on parent state react functional components
- How to update parent state from child component in React + send a paramater
- react stateless child components do not update on state change in parent component
- How to update the correct state value in a parent component that gets its value from a child component using hooks in react?
- React update parent component state doesn't re-render children components
- How to pass input values from a child Form component to the state of its parent component for submission with react hooks?
- Update parent component State from child component in react js
- React router update parent state from children class
- Update parent state based on props and onClick from child in React
- Update Child state from Parent using Context in React
- update react child component's state using props received from an async api call made in the parent component
- React update child component state from parent using getDerivedStateFromProps
- React update child state from parent component
- How to update state if I have props coming from parent component in React Hooks
- React js update child state from an event in the parent
- React Functional Components change state of parent from child without rendering all children
- React - I am passing state from a child to a parent component but the state value is off by one update cycle
- update state of child component from parent component using react hooks
- React hooks updating a parent state from multiple child components
- Update the state from child to parent component in React
- Can't update parent state from child using functional components
- How to update state of child component when it get called in map function from parent component React JS
- React Hooks state update applies only once when called from callbacks in an array of components
- How do I stop nested React components that dispatch Redux actions which update state from getting stuck in an infinite loop?
- React js change child component's state from parent component
- Update component state from outside React (on server response)
- When should ReactJS components make AJAX calls to update state from props?
- Change react hook state from parent component
More Query from same tag
- react mobx - store return Proxy object
- Data storing of React Components
- Window is not defined after a build with Webpack
- How to know which element was clicked when using map function and how to pass that value to another component?
- Increment a key's value (+1) within a series of objects contained in an array that's held in useState
- Trigerring Axios calls after a day/week/month
- How to show nested items from a API list
- array of selected values which I want to delete from state is not working as expected - React
- What is preventing my redux actions from working properly?
- Function isloggedin in react dont works
- Pupeteer click on bootstrap card
- getting error : Could not find a declaration file for module 'react-bootstrap-modal'. in react js
- Is it possible to deploy a non-master branch to Github Pages?
- How to import a JS Library within my React app?
- socket.io (on message) triggers multiple times per message
- How to redirect to another page if user not in that team in nextjs
- React Bootstrap using Nav component refreshes the app
- React and turn.js (turn is not a function)
- How to make a clickable header in react table
- How I navigate to the different routes when I am on the certain Route
- React: getting undefined when accessing array in state
- Cna't access nested objects in reactjs even after a load conditional
- Why I have a loop in my react application?
- Console.log display object but save in localstorage is [object Object]
- routing double rendering in not matching case reactJS
- Unable to understand setState of react js function paramters in a specific call?
- Rematch Loading Typescript keep getting Reducer "loading" returned undefined during initialization
- Cannot find module '…/models/user' nodejs
- Reduce webpack bundle size in react.js
- react hooks: how to handle co-dependent useCallbacks