React：如何仅显示该特定 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

Answer 1

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