Codesandbox link: https://codesandbox.io/s/tender-meadow-un6ny7?file=/src/index.js
I’m creating a basic application where you can dynamically add in text boxes via the react-draft-wysiwyg library.
return (
<div className="editor">
<Editor
//Update and show text box content
editorState={editorState}
onEditorStateChange={(editorState) => {
let html = stateToHTML(editorState.getCurrentContent());
console.log(html);
setHtml(html);
props.setContent(editorId, html, editorState);
setEditorState(editorState);
}}
//Display toolbar on top
toolbar={{
inline: { inDropdown: true },
list: { inDropdown: true },
textAlign: { inDropdown: true },
link: { inDropdown: true },
history: { inDropdown: true },
}}
/>
</div>
);
};
The textboxes are stored and updated through a React state hook. One controls the actual rendered state of each textbox (editorState) and another stores the raw html of each textbox’s contents (html). The state hooks already have defined behavior for adding, removing, and editing.
const EditorContent = (props) => {
const [editorState, setEditorState] = useState(props.content);
const [html, setHtml] = useState("");
useEffect(() => {
console.log("loaded number " + props.id);
});
function App() {
//Declaration of editorList array and setList setter
const [editorList, setEditorList] = useState([
{ id: 0, html: "", content: EditorState.createEmpty() },
]);
const [numberofEditors, setNumberOfEditors] = useState(0);
//Lets you view editorList content in inspect tab
console.log(editorList);
//Used to find specific instance, not used in current code
//Refer to video, forgot what it's used for
const handleServiceChange = (e, index) => {
const { name, value } = e.target;
console.log(name, value);
const list = [...editorList];
list[index][name] = value;
//setEditorList(list);
};
//Handles remove function
const handleEditorRemove = (id) => {
console.log("Remove id " + id);
// remove editor with designated id
let list = editorList.filter((editor) => {
return editor.id !== id;
});
console.log("Updated List: " + list);
setEditorList(list);
};
const handleEditorAdd = (id) => {
console.log(id);
setEditorList([
...editorList,
{ id: id, html: "", content: EditorState.createEmpty() },
]);
setNumberOfEditors(numberofEditors + 1);
};
const setEditorContent = (id, html, editorState) => {
console.log(id, html);
// deep copy array
let editorsCopy = [];
for (let editor of editorList) {
editorsCopy.push(editor);
}
const index = editorsCopy.findIndex((editor) => {
return editor.id === id;
});
editorsCopy[index].html = html;
editorsCopy[index].content = editorState;
setEditorList(editorsCopy);
};
Each text box is also rendered with two buttons, one that lets you add another box, another to delete that specific component.
return (
<form className="App" autoComplete="off">
<div className="form-field">
<label htmlFor="editor">Editor(s)</label>
{editorList.map((editor, index) => (
<div key={index} className="services">
<div className="first-division">
<EditorContent id={editor.id} setContent={setEditorContent} />
{editorList.length - 1 === index && editorList.length < 4 && (
<button
type="button"
onClick={() => {
handleEditorAdd(numberofEditors + 1);
}}
className="add-btn"
>
<span>Add an Editor</span>
</button>
)}
</div>
<div className="second-division">
{editorList.length !== 1 && (
<button
type="button"
onClick={() => {
handleEditorRemove(editor.id);
}}
className="remove-btn"
>
<span>Remove</span>
</button>
)}
</div>
</div>
))}
</div>
<div className="output">
<h2>Output</h2>
{editorList &&
editorList.map((editor, index) => (
<ul key={index}>{editor.service && <li>{editor.content}</li>}</ul>
))}
</div>
</form>
);
}
Adding new textboxes and updating the stored html works perfectly. However, when I attempt to remove a specific text box, no matter which remove button I select, the last row is always removed. I attempted to add id keys for each textbox, and splicing, but nothing seems to properly render the changes, despite the HTML array displaying the correct text.
Am I updating the state incorrectly? Or just rendering incorrectly? Any input would be appreciated.