I have a weird issue with react-modal

Question

PROBLEM: There is a form with multiple sections. In each section, there is a button that opens a modal with a form inside. In my MainForm, I have their sections - Locations, Acquisitions, Funding Rounds. Locations section has a button "Create New Location". Acquisitions Section has a button "Create New Acquisition". Funding Rounds section has a button "Create New Funding Rounds. Whenever a user clicks one of these buttons, its respective form should be opened. But the problem with my code is, no matter which button I click, it is opening the AcquisitionForm Modal.

I have my main component MainForm.jsx which renders a few other components. These child components will have a button inside them and when the button is clicked, I want a form inside a modal. I am using react-modal for modals.

MainForm.jsx

import React, { Component } from 'react';
import Locations from '../SharedFormSections/Locations';
import FundingRounds from '../SharedFormSections/FundingRounds';
import Acquisitions from '../SharedFormSections/Acquisitions';

class MainForm extends Component {

  constructor(props) {
    super(props);
    this.state = {
      modalIsOpen: false
    };

    this.openModal = this.openModal.bind(this);
    this.afterOpenModal = this.afterOpenModal.bind(this);
    this.closeModal = this.closeModal.bind(this);
  }

  openModal(event) {
    event.preventDefault();
    this.setState({modalIsOpen: true});
  }

  afterOpenModal() {
    // references are now sync'd and can be accessed.
    this.subtitle.style.color = '#f00';
  }

  closeModal() {
    this.setState({modalIsOpen: false});
  }

  render() {
    return (
      <form className="mainform">

        <Locations sectionTitle="3. Location(s)" modalIsOpen={this.state.modalIsOpen} openModal={this.openModal} closeModal={this.closeModal} afterOpenModal={this.afterOpenModal} />

        <FundingRounds sectionTitle="6. Funding Rounds" modalIsOpen={this.state.modalIsOpen} openModal={this.openModal} closeModal={this.closeModal} afterOpenModal={this.afterOpenModal} />

        <Acquisitions sectionTitle="7. Acquisitions" modalIsOpen={this.state.modalIsOpen} openModal={this.openModal} closeModal={this.closeModal} afterOpenModal={this.afterOpenModal} />

      </form>
    )
  }
}

export default MainForm;

Acquisitions.jsx

import React from 'react';
import ReactDOM from 'react-dom';
import Modal from 'react-modal';

import FormSectionHeader from '../FormSectionHeader';
import FormSectionMain from '../FormSectionMain';
import AcquisitionsForm from './AcquisitionsForm';
import Button from '../MicroElements/Button';

const Acquisitions = (props) => {
  return (
    <section className="main__form__section" id="acquisitions">

        <FormSectionHeader title={props.sectionTitle} />

        <FormSectionMain>

          <Button 
            clickHandler={props.openModal} 
            buttonText="Create New Acquisition" />

          <Modal
            isOpen={props.modalIsOpen}
            onAfterOpen={props.afterOpenModal}
            onRequestClose={props.closeModal}
            contentLabel="Add New Acquisition(s) Modal">

            <AcquisitionsForm closeModal={props.closeModal} />

          </Modal>

        </FormSectionMain>
      </section>
  )
}

export default Acquisitions;


**`Locations.jsx`**

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import Modal from 'react-modal';

import FormSectionHeader from '../FormSectionHeader';
import FormSectionMain from '../FormSectionMain';
import LocationsForm from './LocationsForm';


class Locations extends Component {

  render() {
    return (
      <section className="contribute-page__main__form__section contribute-form__locations-section"  id="locations">

        <FormSectionHeader title={this.props.sectionTitle} />

        <FormSectionMain className="contribute-page__main__form__section__main">

          <Button clickHandler={this.props.openModal} 
            buttonText="Create New Acquisition" />

          <Modal
            isOpen={this.props.modalIsOpen}
            onAfterOpen={this.props.afterOpenModal}
            onRequestClose={this.props.closeModal}
            contentLabel="Add New Location(s) Modal">

            <LocationsForm closeModal={this.props.closeModal} />

          </Modal>

        </FormSectionMain>
      </section>
    );
  }
}


export default Locations;

The problem is when I click on the create location button or create acquisition button or create a funding round button, I'm getting the popup of AcquisitionsForm. Please help me out. I need to submit this by night.

Answer 1

Its because you have a single state with no unique indentifier for which modal should be opened. You need to keep an id or name in your state as well. For now all three modals are getting opened and since Acquisitions is down in the hierarchy so you can only see Acquisitions modal A quick solution can be to keep separate states for all modals, Try this;

constructor(props) {
    super(props);
    this.state = {
      isAcquisitions: false,
      isFundingRoundsModal: false,
      isLocationModal: false,
    };

    this.openModal = this.openModal.bind(this);
    this.afterOpenModal = this.afterOpenModal.bind(this);
    this.closeModal = this.closeModal.bind(this);
  }

  openModal(event, name) {
    event.preventDefault();
    if (name.toLowerCase() === 'acquisitions') {
      this.setState({ isAcquisitions: true });
    } else if (name.toLowerCase() === 'locations') {
      this.setState({ isLocationModal: true });
    }
    this.setState({ isFundingRoundsModal: true });
  }

And update the props you are sending to your components

<Locations sectionTitle="3. Location(s)" modalIsOpen={this.state.isLocationModal} openModal={this.openModal} closeModal={this.closeModal} afterOpenModal={this.afterOpenModal} />

        <FundingRounds sectionTitle="6. Funding Rounds" modalIsOpen={this.state.isFundingRoundsModal} openModal={this.openModal} closeModal={this.closeModal} afterOpenModal={this.afterOpenModal} />

        <Acquisitions sectionTitle="7. Acquisitions" modalIsOpen={this.state.isAcquisitions} openModal={this.openModal} closeModal={this.closeModal} afterOpenModal={this.afterOpenModal} />

Also, send name prop to your function as well