How to render the desired button click in a react map or target only the button clicked in react map

JavaScript
1

Hi All
I have an array with list of three Continents. I am mapping the array to a button using react map. When clicked on one button the rendering is happening for all three. Below is the code. I tried to use index but still no luck. I am assuming that the index was not placed in right position. can someone help me with the below please.

Here in Overlay I mentioned a condition to check if it is NA or not. Even if I click on a different button which is not NA then also all the three are getting rendered.

Array:
const locationList = [
    {
        id:"L1",
        code:"NA",
        type:"location",
        title:"North America",
    },
    {
        id:"L2",
        code:"AS",
        type:"location",
        title:"Asia",
    },
    {
        id:"L3",
        code:"EU",
        type:"location",
        title:"Europe",
    }
];
export default locationList;

Main Function:
import { locationList } from './Data/FooterLinkList';
import { Overlay } from './CustomHooks/Overlay';
import { useState } from 'react';

function Footer() {
    const [isOverlayOpen, setisOverlayOpen] = useState(false);
    return (
        <section className="footer">
            <div id="footerSections">
                <div className="footerLocation">
                    <div className='footerHeads'>
                        <h5>Locations</h5><br />
                    </div>
                    {locationList.map((location) => (
                        <ul key={location.id}>
                            <li className='footerList'>
                                <button key={location.id} className='footerLinks' id="locationLinkBtn" type="button" onClick={() => setisOverlayOpen(!isOverlayOpen)}>{location.title}</button>
                                <Overlay isOpen={isOverlayOpen} onClose={() => setisOverlayOpen(!isOverlayOpen)} type={location.type} props={location.code}></Overlay>
                            </li>
                        </ul>
                    ))}
                </div>
            </div>
            <p>2024 • &copy;Lakshmi Shashank Ch</p>
        </section>
    );
}
export default Footer;

Overlay hook:
const overlayFunc = (code,value) =>{
    console.log(code);
    console.log(value);
    console.log("inside overlayFunc");
    if(code === 'location' && value==='NA'){
    return(
        <>
        "Hello Shashank"
        </>
    );}
}
export const Overlay = ({isOpen,onClose,type,props}) => {
    console.log(type);
    return (
        <>
            {isOpen ? (
                <div className="overlay">
                    <div className="overlay_bg" onClick={onClose} />
                    <div className="overlay_container">
                        <div className="overlay_controls">
                            <button className="overlay_btn" type="button" onClick={onClose}>
                            </button>
                        </div>
                        <div>
                            {
                                isOpen?(overlayFunc(type,props)):null
                            }
                        </div>
                    </div>
                </div>
            ) : null}
        </>
    )
}
export default Overlay;
2

You have a state (isOverlayOpen) which is just true or false that’s a level above the actual components that require it.

Then you map over the array of components, setting the isOpen property to whatever isOverlayOpen is.

So you have three overlays. isOverlayOpen is true: all of them are open. You click to close, isOverlayOpen is now false, render the three overlays: all of them are closed.

3

Thank you for the response.
I have tried the following and it is giving me the desired output. Could you let me know if that is the right way or is there any efficient way to achieve this operation?

Working Code: Overlay hook
const overlayFunc = (onClose, code, value) => {
    console.log(code);
    console.log(value);
    console.log("inside overlayFunc");
    if (code === 'location' && value === 'NA') {
        return (
            <>
                <div className="overlay_btn">
                    <button id="overlay_btn" type="button" onClick={onClose}>X</button>
                </div>
                <div className="overlay_func">
                    <>USA</>
                    <>CANADA</>
                </div>
            </>
        );
    }
}
export const Overlay = ({ isOpen, onClose, type, props }) => {
    console.log(type);
    return (
        <>
            <div className="overlay">
                <div className="overlay_bg" onClick={onClose} />
                <div className="overlay_container">
                    <div className="overlay_controls">
                        {isOpen ? ((overlayFunc(onClose, type, props))) : null}
                    </div>
                </div>
            </div>

        </>
    )
}
export default Overlay;

Footer Function:
import { locationList} from './Data/FooterLinkList';
import { Overlay } from './CustomHooks/Overlay';
import { useState } from 'react';

function Footer() {
    const [isOverlayOpen, setisOverlayOpen] = useState({ clicked: false, code: "", value: "" });
    return (
        <section className="footer">
            <div id="footerSections">
                <div className="footerLocation">
                    <div className='footerHeads'>
                        <h5>Locations</h5><br />
                    </div>
                    {locationList.map((location) => (
                        <ul key={location.id}>
                            <li className='footerList'>
                                <button key={location.id} className='footerLinks' id="locationLinkBtn" type="button" onClick={() => setisOverlayOpen({ clicked: true, code: location.code, value: location.type })}>{location.title}</button>
                            </li>
                        </ul>
                    ))}
                    <Overlay isOpen={isOverlayOpen.clicked} onClose={() => setisOverlayOpen({ clicked: false, code: "", value: "" })} type={isOverlayOpen.value} props={isOverlayOpen.code}></Overlay>
                </div>
            </div>
            <p>2024 • &copy;Lakshmi Shashank Ch</p>
        </section>
    );
}
export default Footer;