How to update a component after updating props react

user_11878077 0
Viewed 85

how to update a component after updating props? I have the following component structure: 

MyList.js 
render() {
 return(
  <ComponentList products={props.products}>
  <ComponentBoard product={props.product[i]} //send choosen product(1) from list(100 products)
 )
}

and next components have 2 similar component contentRow

ComponentList.js (
same(
 <contentRow > list .map() //100 contentRow
)

ComponentBoard.js
same(
 <contentRow > // 1 contentRow
)

in the component componentRow there are fields that display and through redux change the data in the store, for example, the username.

And when I open the ComponentBoard component and change the value in the ComponentRov field, the value in the ComponentList> componentRow should also change.

For a better understanding:

ComponentList is a table of ComponentsRow, when clicked to row, That opens the ComponentBoard window, in which there is also a componentRow.

Question: how to update the data that is displayed in componentList from componentBoard? they have similar props from 1 store

redux reactjs javascript
2 Answers

When serializing props as initial state you should listen for changes in props and update the state accordingly. In class based components you use componentDidUpdate in functional components you can achieve the same result with an useEffect listening for changes in a given prop 

const Component = ({ foo }) =>{
    const [state, setState] = useState(foo) //initial state

    useEffect(() =>{
        setState(foo) //everytime foo changes update the state
    },[foo])
}

The class equivalent

class Component extends React.Component{
    state = { foo : this.props.foo } // initial state

    componentDidUpdate(prevProps){
          if(prevProps.foo !== this.props.foo)
              this.setState({ foo : this.props.foo }) //everytime foo changes update the state
    }
}
user_101065800

for a better understanding of React, I recommend you read React Life Cycle

the general idea is to make your list into the state of the MyList.js , that way, u can update it through a function in Mylist.js and pass it as a prop to the ComponentBoard . Now you can change the state of MyList and when that changes, so does ComponentList.

class MyList extends Component {
constructor(){
super();
this.state = {
// an array of objects 
}}

    handleBoardChange = () => {  some function using this.setState }
// the rest of your Mylist class
}
user_72949220
Related