CODEWITHSUNDEEP
reactjs
Alan
Alan

Reputation: 31

How to pass parameter value into modal box with react

I am still not familiar with react.js and I am doing a NFT app whereby you click a button and each individual NFT profile will show in a popup modal box which I have already successful integrate the modal box and able to pass the value to a function handleShow(owner) but I have no idea how to send or display this value (owner) into my modal box. Appreciate you guys, can help on my situation. thank you.

const [show, setShow] = useState(false);
const handleClose = () => setShow(false);


function handleShow(owner) {
  
  alert(owner);

  setShow(true);
 
}

<div className="min-h-screen bg-gray-100">

  <div className="max-w-7xl mx-auto sm:px-6 lg:px-8 ">
    <div className="text-black-100 text-6xl pt-28 pb-10">Monkey</div>
    {mintedNftState.state === "PENDING" && (
      <div className="text-xl text-white">LOADING...</div>
    )}
    {mintedNftState.state === "SUCCESS" && (
      <div className="grid grid-cols-3 gap-4">
        {mintedNftState.data.map(
          ({ id, image, name, description, owner }) => {
            return (
              <div key={id} className="bg-white rounded p-2">
                <img src={image} className="mx-auto p-4" alt={name} />
                <div className="text-xl">{name}</div>
                <div className="font-myfont">{description}</div>
                <hr className="my-4" />
                <div className="text-left text-sm">Owned By:</div>
                <div className="text-left text-xs">{owner}</div>
                <div className="mt-12">  

                <Button variant="primary" onClick={() => handleShow(owner)}>
                  Launch demo modal
                </Button>

                </div>
              </div>
            );
          }
        )}
      </div>
    )}
  </div>

  <Modal show={show} onHide={handleClose}>
    <Modal.Header closeButton>
      <Modal.Title>Modal heading</Modal.Title>
    </Modal.Header>
    <Modal.Body>



    </Modal.Body>
    <Modal.Footer>
      <Button variant="secondary" onClick={handleClose}>
        close
      </Button>
      <Button variant="primary" onClick={handleClose}>
        Save Changes
      </Button>
    </Modal.Footer>
  </Modal>

</div>

Upvotes: 0

Views: 4814

Answers (1)

Vinit S
Vinit S

Reputation: 422

I would first add an owner state

const [owner, setOwner] = useState(null);

In handleShow you can set the owner like this

function handleShow(owner) {
    setOwner(owner)
    setShow(true);
}

You can finally display the owner value between <Modal.Body> tags

<Modal.Body>
    <p>{owner}</p>
</Modal.Body>

When closing the modal you can set the owner to null

const handleClose = () => {
    setShow(false);
    setOwner(null);
}

Upvotes: 1

Related Questions