React : How to display a modal popup only for that specific div

Question

To make it more clear , basically what I'm trying to do is like Amazon

There will be a bunch of products and once you click on the product ,Only that product and its details will be displayed on the Popup Modal.

In my case , I have stored 3 data in an Array, I have mapped it out Which creates 3div and 3Modal Popup with buttons in each.

Once I click on the button of 1st div , I want the modal to be open for that first div only.

But right now when I click on the button all 3 Modal Popup.

I'm new to React , I can do this same thing in JQuery and Javascript, But I'm not able to achieve this in React.

Or is there a better approach to this ? Like rather than looping and creating 3modal popup Can we create just one modal popup, That will display the data of the particular div of which button is being clicked?

My Current Code:

App.js , Where i have created the Array

Product.Js Where its being mapped out into 3div and also has the modal popup

Let me know if you guys need more details

Thank you guys.

3 Div that is being dunamically created with the data from array

But when i Click on any button , popup for all div pops up , Thats the issue

What about global state? Do you use mobX or redux, or new react context API...? — Zydnar
For me it looks like modal should be separate component and spawning it depends on value showModal. You can laso do it without showModal: boolean - and simply call jQuery modal, but it's messy. Generally jQuery is not really reactive. You can use react-bootstrap package - it don't use jQuery and it's made reactively. — Zydnar
@Zydnar , I'm new to React so I haven't used redux .etc. Its just react thats all — Thanveer Shah
Okay , But how will i popup for the particular div? Let me post the picture — Thanveer Shah
Reactive means variable changes --> all depending views changes / actions are triggered. So you can use method inherited form React.Component - componentReceivedProps - and here if showModal would be prop you run your jQuery function. Or simply instead of using this prop from state, let jQuery handle some HTML. So create <div> inside Product component with modal content and run on getModal traditionally jQuery. so <div> need to have it's id so run it $(id).modal('open'); — Zydnar

Bayu Bayu · Accepted Answer · 2019-01-20T15:38:13

Of course, all modal will pop up at the same time. All modal using exactly same state which is this.state.showModal. Once it gets true then all will just pop up. If you still like to have 3 modals like that. I suggest you to make the value of showModal state with JSON value. Maybe something like this:

state = {
    showModal: {}
}

then for getModal() function:

getModal = value => {//still using variable from `data.id`
    let key_to_update = {};
    key_to_update[value] = true;
    this.setState( {
        showModal: Object.assign( {}, this.state.showModal, key_to_update )
    } );
}

Then for the <Modal/> should looks like this:

<Modal show={this.state.showModal[data.id]} onClick={()=> this.hideModal(data.id)}/>

To hide the modal you can do opposite of getModal() as follow:

hideModal = value => {//still using variable from `data.id`
    let key_to_update = {};
    key_to_update[value] = false;//Just different on this
    this.setState( {
        showModal: Object.assign( {}, this.state.showModal, key_to_update )
    } );
}

If you still interested and have a problem to implement it, I can help you create a working demo. Because I am not really test the code, just make it based on my experience and quick analysis. However, personally, I like to have a single Modal for this kind of case. Just set a single "state" of "Product detail" then read that "state" from single Modal then show it at the same time.

==== DEMO: MULTIPLE MODAL ELEMENT TECHNIQUE =====

Just like your comment, because you only need to show single modal at a time, then it will be much easier. We don't need to have multiple true/false condition like above. We can just use data.id as the true/false check to the showModal state like follow:

class Product extends Component {
  state = {
    showModal: 0
  };

  getModal = value => {
    this.setState({ showModal: value });
  };

  hideModal = value => {
    this.setState({ showModal: 0 });
  };

  render() {
    return (
      <div className="container">
        {this.props.data.map((data, key) => (
          <div key={key} className="small">
            <p>Namsse: {data.name}</p>

            <button onClick={() => this.getModal(data.id)}>Popup</button>

            <Modal
              show={this.state.showModal === data.id}
              onHide={() => this.hideModal(data.id)}
              name={data.name}
            />
          </div>
        ))}
      </div>
    );
  }
}

Working Demo: https://codesandbox.io/s/pkjvy72mw0

===DEMO: SINGLE MODAL ELEMENT TECHNIQUE===

You can also have only single <Modal/> element just like below:

class Product extends Component {
  state = {
    showModal: false,
    dataModal: {
      name: ""
    }
  };

  getModal = data => {
    this.setState({ showModal: true, dataModal: data });
  };

  hideModal = () => {
    this.setState({ showModal: false });
  };

  render() {
    return (
      <div className="container">
        {this.props.data.map((data, key) => (
          <div key={key} className="small">
            <p>Namsse: {data.name}</p>

            <button onClick={() => this.getModal(data)}>Popup</button>
          </div>
        ))}

        <Modal
          show={this.state.showModal}
          onHide={this.hideModal}
          name={this.state.dataModal.name}
        />
      </div>
    );
  }
}

Working demo: https://codesandbox.io/s/53x7m726xk

React : How to display a modal popup only for that specific div

1 Answers