React infinite loop caused by onChange on Inputfield / React Quill

Question

im new to react and just have to update a value in onChange to filter some tags. But When I do that, it causes an infinite loop. How can I prevent that?

const Editor = ({ onChange, name, value }) => {

  const modules = {
    toolbar: [
      [{ 'header': '1'}, {'header': '2'}, { 'font': [] }],
      [{size: []}],
      ['bold', 'italic', 'underline','strike', 'blockquote'],
      [{'list': 'ordered'}, {'list': 'bullet'}, {'indent': '-1'}, {'indent': '+1'}],
      ['link'],
      ['clean']
    ],
    clipboard: {
      matchVisual: false
    }
  }

  return (
    <ReactQuill
      theme="snow"
      value={value}
      modules={modules}
      onChange={(content, event, editor) => {
        const cleanedContent = content?.replace(/<p><br><\/p>/g, '<br>');
        console.log('test');
        onChange({ target: { name, value: cleanedContent  } });
      }}/>
  );
};

export default Editor;

I edited it and added the code of the whole file, but the onChange is a parameter? Where can i find what you want? — xDrago, Aug 16 '21 at 13:06
I found another function where is used. does that help? see edit — xDrago, Aug 16 '21 at 13:09
This editor component has a prop named `onChange`. Therefore, somewhere you rendered ` — Sinan Yaman, Aug 16 '21 at 13:11
yea that is coming from another component called "Wysiwyg" Its ReactQuill if that helps — xDrago, Aug 16 '21 at 13:11
i thought there might be an easy solution to prevent that onChange gets triggered again, after I use .replace on that value — xDrago, Aug 16 '21 at 13:18

score 0 · Answer 1 · answered May 12 '23 at 08:21

You can replace and set tags manually, so the component will not render infinitely and the output is a clean string. In this way, the ReactQuill component thinks that there are already <p> and <br> tags and won't set them automatically.

<ReactQuill
  value={!value ? '<br>' : `<p>${value}</p>`}
  onChange={(val: string) => {
    handleUpdate(val.replaceAll(/<\/?p[^>]*>/g, '').replace('<br>', ''));
  }}
/>

React infinite loop caused by onChange on Inputfield / React Quill

1 Answers1