I am using react-contentEditable package from npm. When my user clicks a contact, I want to show a nice label, name, and also a button to remove this label from the editable div if the user wants.
I have the label and name figured out, but I cant seem to understand how to pass the onClick to a button when it is rendered like this below
`<label contentEditable="false" class="p-1 rounded-capsule">${contact.firstName + " " + contact.lastName + " "}<span class="badge fs--1 badge-soft-success badge-pill ml-2">${contact.phone_number}</span><button class="badge-pill badge-soft-primary">X</button></label>`)) // How do I pass an onClick to the button?
Here is the full component
import React, { useState, useRef, useEffect, Fragment } from 'react';
import ContentEditable from 'react-contenteditable';
const [toField, setToField] = useState({value: " ", html: " "})
const toFieldRef = useRef()
const addContactsToDiv = () => {
let selectedContactsArray = [] // create and empty array
const Matches = selectedRows.filter((row) => {
const isMatched = contacts.some(contact => { if(contact._id == row) {
selectedContactsArray.push({firstName: contact.firstName, lastName: contact.lastName, phone_number:contact.phone_number, _id: contact._id})
}})
return isMatched
})
const matchedContactsArray = []
selectedContactsArray.map(contact => { // mapping over selected to add html
// How can I add an onClick to the button when I have to pass it as string?
matchedContactsArray.push((`<label contentEditable="false" class="p-1 font-weight-bold bg-primary ml-2 text-white rounded-capsule shadow-none fs--3">${contact.firstName + " " + contact.lastName + " "}<span class="badge fs--1 badge-soft-success badge-pill ml-2">${contact.phone_number}</span><button class="badge-pill badge-soft-primary">X</button><span name="indy-contacts" class="d-none">${contact._id}</span></label>`))
})
matchedContactsArray.map(contact => { return contact})
const stringifiedRows = matchedContactsArray.toString() // push stringified results in to array
setToField({...toField, html: stringifiedRows}) // update state with array instead of updating state inside loop
}
<ContentEditable
name="to"
innerRef={toFieldRef} // passing our ref instead of state
html={toField.html} // the html = our ref.current property
//value={toField}
onBlur={handleBlur}
onClick={() => {handleClick()}}
onChange={handleChange} // this sets our refs.current = event.target.value
style={{minHeight: "7em", maxHeight: "10em", overflow: "auto"}}
className="border border-2x border-300 bg-light rounded-soft fs-1"
>
</ContentEditable>
