React - state not getting updated after a prop being sent from another component

1
votes

am having a trouble

i do have a popup in my BrowseModalUpload component and i had given state as 

class BrowseModalUpload extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            modalIsOpen: this.props.browseAssetComponent ? this.props.browseAssetComponent : false,
...
}}

So initially there is no popup and when you click on one link , setState modalIsOpen to true and modal opens-thats the normal flow And when i click in close window ,it setState modalIsOpen to false.

So i just clicked on popup it came and i click on close button it goes ,now i click this popup from different component having prop browseAssetComponent as true ,it didn't open up

code for modal is like this

<Modal transparent isOpen={this.state.modalIsOpen} onAfterOpen={this.afterOpenModal} onRequestClose={this.closeModal} ariaHideApp={false}>

this this.state.modalIsOpen is still false,it not gets updated when i call the same from another component and this popup not coming up.

if you guys need more information let me know. any help will be way to solve my roadblock

3
reactjsstatereact-props
Are you reverting the boolean in this.closeModal? Can you post the entire component? - GowriPranithBayyana
closeModal() { this.setState({ modalIsOpen: false }); } @User965207 - midhun k
I agree with the answers below so far but for your understanding, the reason it's not being updated is because when React creates the component it calls the constructor. When you pass new props to the component the constructor is not being called because the component is already instantiated. Instead the componentDidUpdate method of the React.Component class is being called with previous and current props. - Mario Subotic
@MarioSubotic so what will be the ideal solution for this - midhun k
Can you create a minimal reproducible example in codesandbox? - SuleymanSah

3 Answers

1
votes

You can use componentDidUpdate lifecycle method where you can set the state based on the props. 

    class BrowseModalUpload extends React.Component {
            constructor(props) {
                super(props)
                this.state = {
                    modalIsOpen: this.props.browseAssetComponent ? this.props.browseAssetComponent : false,
        ...
        }
        componentDidUpdate(prevProps){
if(this.prevProps.browseAssetComponent != this.props.browseAssetComponent)
        this.setState ({
                    modalIsOpen: this.props.browseAssetComponent ? this.props.browseAssetComponent : false)
        }}
        }
0
votes

Don't define your props in state.

Better to pass directly like this

<Modal transparent isOpen={this.props.modalIsOpen} onAfterOpen={this.afterOpenModal} onRequestClose={this.closeModal} ariaHideApp={false}>

and handle from parent component function like this

handleModel=()=>{
  this.setState(prev=>({modalIsOpen:!prev.modalIsOpen}));
}

Check this example https://codesandbox.io/s/model-popup-o1z0p. I hope it will help you.

0
votes

By doing this,

constructor(props) {
  this.state = {
    foo: props.foo
  }
}

you just initialized a state from a prop. React doesn't sync the value of this.state.foo with this.props.foo for you.

If you want to change your state when props are changed, you can do it in getDerivedStateFromProps.

static getDerivedStateFromProps(props, state) {
 return { foo: props.foo };
}

However, if you read the document of getDerivedStateFromProps carefully, you'll find React doesn't recommend to use this method in most of the situations. From your code, I don't really understand why this.props.browseAssetComponent would affect this.state.modalIsOpen. If you post the whole code I can give further suggestion.