TypeError: Cannot read property 'length' of undefined in react.js

Question

this is the error i'm getting in my react application. please help me fix this. I've extended the code for better understanding. Have any idea what's the problem

const TextEditor = (value, props) => {
   console.log(props.value)
   console.log(props.value.length)
   const renderElement = useCallback(props => <Element {...props} />, [])
    const renderLeaf = useCallback(props => <Leaf {...props} />, [])
    const editor = useMemo(() => withHistory(withReact(createEditor())), [])

update-as told, I've added the code where i pass my values. I've used value= {value.document} where I've initialised document in the initialValues below

 const TextEditor = (value, props) => {
      console.log(props.value)
      console.log(props.value.length)
      const renderElement = useCallback(props => <Element {...props} />, [])
      const renderLeaf = useCallback(props => <Leaf {...props} />, [])
      const editor = useMemo(() => withHistory(withReact(createEditor())), [])
      const [isPreviewModalOpen, setPreviewModal] = useState(false);
      
      const initialValues= {
        title:value.title,
        document: value.document,
      }
    
      return (
        <>
        
          <div className="text-center pt-3">
            <h2 style={{color: "#3D44C8", fontWeight: "bold"}}>Ask an expert</h2>
            <p style={{color: "#DB262F", fontWeight: "bold", fontSize: "18px"}}>Get your questions solved within 24 hours!</p>
          </div>
          <Slate editor={editor} value={props.value} onChange={value => {
            props.setValue(value);}} >
            <div className="textEditor_toolbar">
              <div className="textEditor_buttonedit">
                <Navbar style={{padding: "0"}} expand="lg">
                  <Navbar.Toggle aria-controls="basic-navbar-nav" />
                  <Navbar.Collapse id="basic-navbar-nav">
                    <Navbar.Brand>
                      <ButtonGroup>
                        <MarkButton format="bold" tooltip="bold" icon={faBold}/>
                        <MarkButton format="italic" icon={faItalic} />
                        <MarkButton format="underline" icon={faUnderline} />
                      </ButtonGroup>
                      <ButtonGroup>
                        <MarkButton2 format="code" icon={faCode}/>
                        <BlockButton format="bulleted-list" icon={faListUl} />
                        <BlockButton format="numbered-list" icon={faListOl} />
                      </ButtonGroup>
                    </Navbar.Brand>     
                        <Nav>
                          <label className="custom-file-upload">
                            <input
                              type="file"
                              name="profileImg"
                              accept="image/png, image/jpeg"
                              multiple="false"
                              onChange={setImage}
                            />
                            <FontAwesomeIcon className="custom-file-icon" icon={faPaperclip}/>
                          </label>
                        </Nav>
                        <Form> 
                          <Choice  />
                        </Form>
                    </Navbar.Collapse>
                  </Navbar>
                  </div>
                </div>
              <div>
            </div>
            <Editable
              className="textEditorMain"
              renderElement={renderElement}
              renderLeaf={renderLeaf}
              value={value.document}
              placeholder="Type your Question, Paste your Question text or Attach images or PDF here"
              spellCheck
              autoFocus
              useReadOnly
              onPaste = {onPaste}
              onKeyPress={event => {
                for (const hotkey in HOTKEYS) {
                  if (isHotkey(hotkey, event )) {
                    event.preventDefault()
                    const mark = HOTKEYS[hotkey]
                    toggleMark(editor, mark)
                  }
                }
              }}
            />
          </Slate>

Answer 1

props.value is undefined, make sure you are correctly passing your props