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