Why I cannot create my own custom hook in js?

Question

I was trying to make my Editor a custom hook so I created 'useEditor' hook like this

import { useState, useEffect } from 'react';
import ReactQuill from 'react-quill';
import MathEditor from './MathEditor';

  //some other imports
    
function useEditor() {
  const [editorHtml, setEditorHtml] = useState('');
  const [placeholder, setPlaceholder] = useState('Write something...');
  const [mathEditorVisible, setMathEditorVisible] = useState(false);
  const [expressionEditable, setExpressionEditable] = useState(false);

  const handleChange = (html) => {
    setEditorHtml(html);
  };

  //some other functions 

  const Editor = () => (
    <div>
      <ReactQuill
        onChange={handleChange}
        value={editorHtml}
        modules={modules}
        bounds='.app'
        placeholder={placeholder}
      />
      {mathEditorVisible && (
        <MathEditor
          onSaveFormula={handleSaveFormula}
          setMathEditorVisible={setMathEditorVisible}
          expressionEditable={expressionEditable}
          setExpressionEditable={setExpressionEditable}
          initialLatex=''
        />
      )}
    </div>
  );

  return {
    Editor,
    handleChange
  };
}

export default useEditor;

But when compiling this error occurs

*** Objects are not valid as a React child (found: object with keys {Editor, handleChange}). If you meant to render a collection of children, use an array instead. ***

This looks like it should just be a custom component `` instead of a hook. — Martin, Jul 06 '23 at 12:38
I am using it in index.js like this ``` import Editor from './components/useEditor'; function App() { return (

); } ``` It was a custom component actually but I had to change it to a custom hook because I have to use it in a bigger project. — lighthouse, Jul 06 '23 at 12:47

score 1 · Accepted Answer · answered Jul 06 '23 at 12:53

1

You are not exporting Editor, you are exporting useEditor. You have to call useEditor to get Editor

import useEditor from './components/useEditor';
function App() {
  const { Editor } = useEditor();
  return (
    <div className='app'> <Editor /> </div>
  );
}

answered Jul 06 '23 at 12:53

Konrad

21,590
4
28
64

When I did so, it did not work as expected, the handleChange function in the editor does not work even though I returned it in the useEffect hook! – lighthouse Jul 06 '23 at 13:05
@lighthouse: What specifically "did not work as expected"? What was the specific expectation? What was the test? What was the observed result? Why do you return that function in the first place? Where else are you trying to use it? The answer above demonstrates how to use a component returned from a hook, which was the problem in the original question. If you have a new, separate problem then you are encouraged to open a new question and include a [mcve] which demonstrates that problem. – David Jul 06 '23 at 13:15
@David yes you are right thank you! And thanks to you Konrad for the answer to the main question! – lighthouse Jul 06 '23 at 13:25

Why I cannot create my own custom hook in js?

1 Answers1