Toggle modal in React

Question

I have a parent container which has a couple of child components. When the user clicks onClick={props.toggleReviewForm}, the function

toggleReviewForm () {
   this.setState(prevState => ({
     reviewFormActive: !prevState.reviewFormActive,
     displayNameModalActive: !prevState.displayNameModalActive
    }))
}

toggles the reviewForm state to visible. It's visibility is set with reviewFormActive={reviewFormActive} in the child component and the parent has `this.state = {reviewFormActive: false} set in the constructor. I am passing

displayNameModalActive={displayNameModalActive}

into the child component for the modal, but getting the error

Uncaught TypeError: Cannot read property 'displayNameModalActive' of undefined at DisplayNameModal.render

Parent Container

 class ReviewsContainer extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      reviewFormActive: false,
      displayNameModalActive: false
    }
    this.config = this.props.config
    this.toggleReviewForm = this.toggleReviewForm.bind(this)
  }

  toggleReviewForm () {
    this.setState(prevState => ({
      reviewFormActive: !prevState.reviewFormActive,
      displayNameModalActive: !prevState.displayNameModalActive
    }))
  }

  render () {
    const {
      reviewFormActive,
      displayNameModalActive
    } = this.state

    return (
      <div className='reviews-container'>
        <ReviewForm
          config={this.config}
          reviewFormActive={reviewFormActive}
          toggleReviewForm={this.toggleReviewForm}
        />

        {this.state.displayName &&
          <div className='modal-container'>
            <DisplayNameModal
              bgImgUrl={this.props.imageUrl('displaynamebg.png', 'w_1800')}
              config={this.config}
              displayNameModalActive={displayNameModalActive}
              displayName={this.state.displayName}
              email={this.state.email} />
          </div>
        }
      </div>
    )
  }
}

export default ReviewsContainer

Child Component (modal)

 class DisplayNameModal extends React.Component {
  constructor (props){
    super(props)
    this.state = {
      displayName: this.props.displayName,
      email: this.props.email.split('@')[0]
    }
  }

  render (props) {
    const {contentStrings} = this.props.config

    return (
      <div>
      //Should only allow the modal to show if the username is the same as the email or there is no username available
      { props.displayNameModalActive && this.state.displayName === this.state.email || !this.state.displayName && 
      <div className='display-name-container' style={{ backgroundImage: `url(${this.props.bgImgUrl})` }}>
        <div className='display-name-content'>
          <h2 className='heading'>{contentStrings.displayNameModal.heading}</h2>
          <p>{contentStrings.displayNameModal.subHeading}</p>
          <input type="text"
             defaultValue={this.state.displayName}
             placeholder={this.state.displayName}
             minLength="3"
             maxLength="15"/>
          <button
            onClick={this.updateDisplayName}
            className='btn btn--primary btn--md'>
            <span>{contentStrings.displayNameModal.button}</span>
          </button>
          <p className='cancel'>{contentStrings.displayNameModal.cancel}</p>
        </div>
      </div>
    }
    </div>
    )
  }
}

export default DisplayNameModal

Tomasz Mularczyk Tomasz Mularczyk · Accepted Answer · 2018-05-11T16:23:34

Whyt this:

props.displayNameModalActive

and not this:

this.props.displayNameModalActive

?

Correct me if I'm wrong but render doesn't get props as argument.

Toggle modal in React

1 Answers