How to show single model when onClick in React?

Question

How to apply function so that on click of p tag a react-bootstrap Modal should be open for that p tag only not for all other tags.

How I should code in a such a way that when a p tag is clicked a modal should open for that p tag only and a single Modal only, not all the simultaneously

here is my live code https://codesandbox.io/s/distracted-water-suuuw?file=/App.js

export default function App() {
  const [modalShowing, setModalShowing] = useState(false);

  const [items] = useState({
    stude: [
      { id: "1", name: "AZ" },
      { id: "2", name: "AX" },
      { id: "3", name: "AY" },
      { id: "4", name: "AB" },
      { id: "5", name: "AQ" },
      { id: "6", name: "AE" }
    ]
  });

  const handleModel = () => {
    setModalShowing(true);
  };

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      {items.stude.map(item => (
        <div key={item.id}>
          <p onClick={handleModel}>{item.name}</p>
          <Modal
            show={modalShowing}
            onHide={() => setModalShowing(false)}
            size="lg"
            aria-labelledby="contained-modal-title-vcenter"
            centered
          >
            <Modal.Header closeButton>
              <Modal.Title id="contained-modal-title-vcenter">
                ITEMS
              </Modal.Title>
            </Modal.Header>
            <Modal.Body>{item.name}</Modal.Body>
          </Modal>
        </div>
      ))}
    </div>
  );
}

Answer 1

Don't create multiple modals, its a bad practice. Create a single modal outside the map function and make its content dynamic. In the map function do <p onClick={() => handleClick(item)} > and set the clicked item in the state. Then, in the modal, use the item set in the state. Something like:

export default function App() {
  const [modalShowing, setModalShowing] = useState(false);
  const [selectedItem, setSelectedItem] = useState(null);

  const [items] = useState({
    stude: [
      { id: "1", name: "AZ" },
      { id: "2", name: "AX" },
      { id: "3", name: "AY" },
      { id: "4", name: "AB" },
      { id: "5", name: "AQ" },
      { id: "6", name: "AE" }
    ]
  });

  const handleModel = item => {
    setSelectedItem(item);
    setModalShowing(true);
  };

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      {items.stude.map(item => (
        <div key={item.id}>
          <p onClick={() => handleModel(item)}>{item.name}</p>
        </div>
      ))}

      <Modal
            show={modalShowing}
            onHide={() => setModalShowing(false)}
            size="lg"
            aria-labelledby="contained-modal-title-vcenter"
            centered
          >
            <Modal.Header closeButton>
              <Modal.Title id="contained-modal-title-vcenter">
                ITEMS
              </Modal.Title>
            </Modal.Header>
            <Modal.Body>{selectedItem.name}</Modal.Body>
          </Modal>

    </div>
  );
}

Answer 2

you can pass some info as a parameter to your handler. as i can see you are using map function so it can be done something like this.

for example (in class component):

constructor(){
  this.state = {
   stude: [{ id: "1", name: "AZ" }, { id: "2", name: "AX" }]
   showModal: false,
   currentModalData: {}
  }
}

toggleModal = (item) => this.setState({showModal: true, currentModalData: item})

render(){
  return (
    {this.state.stude.map(item => <p onPress={()=>this.renderModal(item)}>{item.name}</p>)}
    {this.state.showModal && this.renderModal()}
  )
}

renderModal = () => (/*YOUR MODAL CODE*/)