I am using a library called react-contentEditable. The div has an html prop and a value. I am mixing the text with labels. When I add the label into the div it registers an onChange that is setting the { html: target.value }. The html is fine, but I need the value prop to store only the text within the label, not the added html to create the label.
Example, When the value is saved with onChange it looks like this
Hi, firstName How are you doing today?
I need value to look like Hi, firstname How are you doing today?
My approach is to do state.value.replace(/<label class-"p-1" >, " ")
However I am getting the error:Expected an assignment or function call and instead saw an expression
import React, { createRef, useRef, Fragment, useState, useEffect} from 'react';
const contentEditable = createRef()
const [textValue, setTextValue] = useState({value: "", html: ""});
const component = () => {
<div>
<ContentEditable
name="body"
innerRef={contentEditable}
html={textValue.html}
value={textValue}
onChange={({target}) => {
const newValue = textValue.html.replace(/<label contentEditable=false class=p-1 bg-primary text-white rounded-capsule shadow-none fs--3>/, " ")
setTextValue({ ...textValue, value: newValue, html: target.value}), setTemplate({...template, [target.name]: target.value})}}
style={{minHeight: "10em"}}
className="border border-2x border-300 bg-light rounded-soft fs-1"
/>
</div>
}
export default Component