Shamoon Shamoon - 2 months ago 8
React JSX Question

How can I merge 2 modals into 1 using components with React / Redux?

I have a signup modal that looks like:

enter image description here

and a login modal that looks like:
enter image description here

Right now, I have them as 2 separate React Components triggered from my NavBar as follows:

<Nav pullRight className="navright">
<NavItem eventKey={3} href="#">Stuff</NavItem>
<NavItem eventKey={4} href="#">Blog</NavItem>
<NavItem href="#" className={this.state.signedIn ? '' : 'hidden'}>{this.state.name}</NavItem>
<NavItem eventKey={2} href="#" className={this.state.signedIn ? 'hidden' : ''}><SignupModal/></NavItem>
<NavItem eventKey={1} href="#" className={this.state.signedIn ? 'hidden' : ''}><LoginModal/></NavItem>
</Nav>


I'd like to combine them into one modal component (potentially called
AuthModal
) and that'll load the appropriate component that is selected.

I am using
react-bootstrap
if that matters. I'm new to React, so if something is unclear, please let me know and I'll clarify.

Thanks.

Answer

Gonna give you an idea.

You can setup it this way.

const Modal = ({ auth }) => {
  if (auth) {
    return {
      <div>all your stuff here</div>
    }
  }
  return {
    <div>all your other stuff here</div>
  }
}

So you call you modal like <Modal /> and if you need to be the auth one you do like <Modal auth={true} />

<Nav pullRight className="navright">
    <NavItem eventKey={3} href="#">Stuff</NavItem>
    <NavItem eventKey={4} href="#">Blog</NavItem>
    <NavItem href="#" className={this.state.signedIn ? '' : 'hidden'}>{this.state.name}</NavItem>
    <NavItem eventKey={2} href="#" className={this.state.signedIn ? <Modal /> : <Modal auth={true} />}></NavItem>
  </Nav>

Hope that can help ;)

Comments