React forcing a full re-render on button click

Question

Whenever I try to click on a button which essentially populates a modal and displays it, the whole page re-renders and everything is set back to default. I tried to use React dev tools profiler but it wasn't working. Can somebody tell me what I'm doing wrong? I haven't been able to figure out what's wrong here. Here's my code

import React, { useState } from "react";
import Box from "@mui/material/Box";

import Modal from "@mui/material/Modal";
import "./rewards.css";
const json //some api response
const style = {
    position: "absolute",
    top: "50%",
    left: "50%",
    transform: "translate(-50%, -50%)",
    width: 400,
    bgcolor: "background.paper",
    border: "2px solid #000",
    boxShadow: 24,
    p: 4,
};
const Rewards2 = () => {
    const [showModal, setModal] = useState(false);
    const [modalContent, setModalContent] = useState({
        modalHeader: "",
        modalImg: "",
        modalContent: { content: "", terms: [], redemptionSteps: [] },
    });

    //const [showModal, setModal] = useState(false);
    //const [s]

    // onClick={handleOpen(d.name, d.img)}
    const handleClose = () => setModal(false);
    const handleOpen = () => setModal(true);
    return (
        <div id="content">
                            <div className="content-top">
                                <ul>
                                    {json.reward_partners.map(
                                        (partner, index) => {
                                            // eslint-disable-next-line
                                            return (
                                                <div
                                                    className="row"
                                                    key={index}
                                                >
                                                    <div className="col-md-3 col-xs-3">
                                                        <div className="widget-thumb coupon_desc">
                                                            <img
                                                                src={
                                                                    partner.img
                                                                }
                                                                className="mainpnplogo1"
                                                                alt="partnership-logo"
                                                            />
                                                        </div>
                                                    </div>
                                                    <div className="col-md-6 col-xs-6">
                                                        <div className="coupon_desc">
                                                            <div>
                                                                {
                                                                    partner.content
                                                                }
                                                            </div>
                                                        </div>
                                                    </div>
                                                    
                                                    <div className="col-md-3 col-xs-3">
                                                        <div className="text-center coupon_desc">
                                                            THIS IS THE BUTTON LOGIC
                                                            <a
                                                                href=""
                                                                className="theme-button theme-button-small theme-red w-btn-nocase w-btn-white knowmore-btn"
                                                                data-toggle="modal"
                                                                data-target="#couponModel"
                                                                
                                                                onClick={() => {
                                                                    setModalContent(
                                                                        partner.modal
                                                                    );
                                                                    handleOpen()
                                                                    console.log(
                                                                        "inside onCLick",showModal
                                                                    );
                                                                }}
                                                            ></a>
                                                        </div>
                                                    </div>
                                                </div>
                                            );
                                        }
                                    )}
                                </ul>
                                {/* <Modal open={showModal} onClose={handleClose}>
                <Box sx={style}>
                    <h1>{modalContent.modalHeader}</h1>
                    <img
                        src={modalContent.modalImg}
                        alt={modalContent.modalHeader}
                    />
                    <p>{modalContent.modalContent.content}</p>
                </Box>
            </Modal> */}
                                <Modal
                                    className="modal fade"
                                    id="couponModel"
                                    tabIndex="-1"
                                    role="dialog"
                                    aria-labelledby="exampleModalLabel"
                                    open={showModal}
                                    onClose={handleClose}
                                    
                                >
                                    <Box sx = {style}>
                                        <div
                                            className="modal-dialog model-lg"
                                            role="document"
                                        >
                                            <div
                                                className="modal-content"
                                                id="modalBody"
                                            >
                                                <div className="modal-header">
                                                    <button
                                                        type="button"
                                                        className="close"
                                                        data-dismiss="modal"
                                                    >
                                                        ×
                                                    </button>
                                                    <h4 className="modal-title">
                                                        <span className="">
                                                            <b>
                                                                {
                                                                    modalContent.modalHeader
                                                                }
                                                            </b>
                                                        </span>
                                                    </h4>
                                                </div>
                                            </div>
                                        </div>
                                    </Box>
                                </Modal>
                            </div>
                        </div>

    );
};

export default Rewards2;

P.S please do ignore the redundant divs, I cut out a lot of content to show only the relevant parts.

EDIT: Highlighted the Button Logic

Answer 1

The issue here is with <a /> element. You can use the button instead of <a /> as on click anchor tag execute its basic behavior.

Here's a comparison between <a/> and <button /> element. Codesandbox.

export default function App() {
  const handleClick = () => {
    console.log("clicked");
  };

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <a href="" onClick={handleClick}>
        Anchor
      </a>
      <button onClick={handleClick}>button</button>
    </div>
  );
}

EDIT

If you have to use the <a /> element then you can add event.preventDefault() to prevent the default behaviour of <a/> tag.

Codesandbox

export default function App() {
  const handleClick = (e) => {
    e.preventDefault();
    console.log("clicked");
  };

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <a href="" onClick={handleClick}>
        Anchor
      </a>
      <button onClick={handleClick}>button</button>
    </div>
  );
}