How would I make an API output inside of the Slate text-editor?

[NorkzYT]

  How would I make an API output inside of the Slate text-editor?

E.g. (This does not work).

import React, { useState } from 'react';
import { Editor } from 'slate-react';

const MyComponent = () => {
  const [data, setData] = useState([]);

  // Fetch the data from the API and update the component's state
  useEffect(() => {
    fetch('https://my-api.com/data')
      .then(res => res.json())
      .then(json => setData(json));
  }, []);

  return (
    <Editor
      value={data}
      onChange={newData => setData(newData)}
    />
  );
}

Any help would be much appreciated.

I would also like to know why the following does not work.

      <div>
        <Slate
          //className="text-editor"
          editor={editor}
          value={initialValue}
          onChange={onChange}>
          {isLoading ? <div>Loading ...</div> : <Editable value={data.text} />}
        </Slate>
      </div>

Originally posted by @NorkzYT in #5217

[dylans]

See #4612 (comment)

[NorkzYT]

Closing due to potential solution as to what dylans commented, and due to inactivity.