Why does the return value change when using React-icon component for my button?-CodePudding

I want to delete a list, and style that button with an icon. If i just have "delete" as my button, my onClick returns the ID as expected. However, when I try to use a component for my button, it returns a weird object.

I tried using different elements instead of a <Button/> and different icon libraries, but it results in the same behavior. This is how I was importing the component and I am using styled-components if that matters

import React from "react";
import { Draggable } from "react-beautiful-dnd";
import {BsXCircle} from "react-icons/bs"
import styled from 'styled-components'

Below is my code for my component that renders the list's title, and a button that would delete the list:

<div
   {...provided.draggableProps} {...provided.dragHandleProps} ref={provided.innerRef}> 
    <div value={props.list._id} onClick = {props.handleListSelect} className="list"> 
        <button  value={props.list._id} onClick={props.handleDeleteList} >                          
            <BsXCircle/>           
        </button>
        {props.list.title}                        
    </div>
</div>

The code snipper below works as expected.

<button  value={props.list._id} onClick={props.handleDeleteList} >                          
    delete         
</button>

My props.handleDeleteList function is below:

const deleteList = async (e) =>{
   console.log(e.target.value)
}

If I use <BsXCircle/> , my console log is this:

{stringValue: '"undefined"', valueType: 'string', kind: 'ObjectId', value: 'undefined', path: '_id', …}

I am confused of why this is happening....

Isnt my value that I am passing assigned in the value attribute of my button? Why does rendering a component instead of a text change the value of my button?

I have simplified my code just for asking this question. I would appreciate any feedback, even on ways to improve on asking questions. Thank you in advance :)

CodePudding user response：

First thing, the <button/> element should accept only certain types of nested elements: MDN ref

Permitted content Phrasing content but there must be no Interactive content

That said, your problem is that nested elements of <button/> inherit its event listeners, so when you nest the react-icon Component ( an <svg> I guess ), and click on the button, you basically are dispatching the click event on the svg and not on the <button/>. You can address the issue with a simple css fix:

button > * {
  pointer-events: none;
}

This way you are disabling all event listeners on button's children and it should fix it.