Quiero eliminar una lista y diseñar ese botón con un icono. Si solo tengo "eliminar" como mi botón, mi onClick devuelve la ID como se esperaba. Sin embargo, cuando trato de usar un componente para mi botón, devuelve un objeto extraño.

Intenté usar diferentes elementos en lugar de un <Button/> y diferentes bibliotecas de íconos, pero el resultado es el mismo. Así es como estaba importando el componente y estoy usando componentes con estilo si eso importa

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

A continuación se muestra mi código para mi componente que representa el título de la lista y un botón que eliminaría la lista:

 <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>

El fragmento de código a continuación funciona como se esperaba.

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

Mi función props.handleDeleteList está a continuación:

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

Si uso <BsXCircle/> , el registro de mi consola es este:

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

Estoy confundido de por qué está sucediendo esto....

¿No está asignado el valor que estoy pasando en el atributo de valor de mi botón? ¿Por qué la representación de un componente en lugar de un texto cambia el valor de mi botón?

He simplificado mi código solo por hacer esta pregunta. Agradecería cualquier comentario, incluso sobre formas de mejorar al hacer preguntas. Gracias de antemano :)