문제 : WHAT?

[tiptap warn] Invalid content. Passed value : {{$$typeof: Symbol(react.element), type:'div'... 와 같은 경고가 뜸

왜 발생 : WHY?

• 참고
• tiptap 라이브러리를 사용하는데, invalid한 타입값을 content로 줌.
• content가 라이브러리 내부적으로 div로 만들어주는데, 내가 content로 넣을 수 있는 형태가 string 형태가 아닌 div로 주니까 발생.

const editor = useEditor({
    extensions: [
      StarterKit.configure({ history: false }),
      Underline,
      Link,
      Superscript,
      Subscript,
      Highlight,
      TextAlign.configure({ types: ['heading', 'paragraph'] }),
    ],
    
    content: <div>{state.filter((v) => v.id === id)[0]?.details || ''}</div>,
  	onUpdate(e) {
      setToggle(e.editor?.getHTML());
      // eslint-disable-next-line array-callback-return
      state.map((item, idx) => {
        if (item.id !== id) return;

        const copyState = [...state];
        copyState.splice(idx, 1, {
          id: item.id,
          details: e.editor?.getHTML(),
        });
        setState(copyState);
      });
    },
  });

문제해결 : HOW?

• div로 감싸줬던 거를 제거하기 -> 문자리터럴로 content에 넣음

`<div>스트링이지만 라이브러리가 div로 만들어줍니당</div>`

const editor = useEditor({
    extensions: [
      StarterKit.configure({ history: false }),
      Underline,
      Link,
      Superscript,
      Subscript,
      Highlight,
      TextAlign.configure({ types: ['heading', 'paragraph'] }),
    ],
    content: state.filter((v) => v.id === id)[0]?.details || '',
    onUpdate(e) {
      setToggle(e.editor?.getHTML());
      // eslint-disable-next-line array-callback-return
      state.map((item, idx) => {
        if (item.id !== id) return;

        const copyState = [...state];
        copyState.splice(idx, 1, {
          id: item.id,
          details: e.editor?.getHTML(),
        });
        setState(copyState);
      });
    },
  });