Carousel onClick react issue

Question

I have an issue with carousel. I made a carousel that have some "messages" and I want that when I click on "X" button the message will remove from the array of the carousel, but I can't do "onClick" in the carousel because when I do onClick={console.log('yes') for example it is print 'yes' every second without click anything.. How can I use onClick in carousel that will work only on actually click?

my code:

    const showCarouselItems = (arr)=>{
    return(         
        arr.map( (element,index,arr)=>{
                if(element.read_or_not===0){
                return(
                    <div className={firstItemIsActive(index)}>
                    <div className="SocialMedia">
                        <div className="titel_socialmedia">
                            <div className="title-side">
                            <button className="circel C_email" id={element.id} style={{backgroundImage: "url(" + MailIcon + ")"}}></button>
                            <div className="item-title-name">{t('mail')}</div>
                            </div>
                            <div className="title-side">
                            <label className="clock_social">{element.time}</label>
                            <button className="circel carousel-exit"><div id="x">X</div></button>
                            </div>
                        </div>
                        <label className="subject_email">{element.subject}</label>
                        <div className="content_email carouselPara">{element.body}</div>
                    </div>
                    </div>


) }}))}

example of object from the array:

   {
        id: "v7fAa5OltrU=",
        subject: "We had a serious security incident today",
        body: "<p>Dear Prime Minister, <br/><br/>We need instructions on how to handle the situation.</p>",
        from: "Army",
        to_list: "Prime-minister",
        cc_list: "",
        event: "Suspicion of war breaking",
        read_or_not: 0,
        has_attachments: 0,
        attachments: "",
        compare_time: 1580717905000,
        time: "08:18",
        time_and_date: "Mon, 03 Feb 2020 08:18:25 ",
        show: 1,
        challenges: null,
        dilemmas: null,
        decisions: null,
        flag_on: 0,
        type: null,
        real_event_id: null,
        message_parent_id: "",
        is_replayed_or_forward: "0",
        is_survey: 0
    } ,

Answer 1

Try to set on click handle like this:

onClick={() => console.log('yes')}

Also, do not create handle action\fucntion in map loop. Just create it outside:

const handleOnItemClick = (id) => {//some busines logic}

and in map:

<button onClick={() => handleOnItemClick(element.id)} className="circel carousel-exit"><div id="x">X</div></button>

Best regards!