CODEWITHSUNDEEP
reactjstypeerrordraftjs
Nick Wood
Nick Wood

Reputation: 47

DraftJS: nextEditorState.getDirectionMap is not a function

I tend to learn by doing but this issue has me stuck. In DraftJs, when trying to update the editor state, I'm running in to the error below.

Uncaught TypeError: nextEditorState.getDirectionMap is not a function

If I call setEditorState inside of the onChange method (instead of 'onChange'), everything works fine. However, when I call it from another function everything seems to fall apart. This all stems from me trying to save the editor contents to a database. I'd like to use the onChange method to autosave everything, hence calling another function, however, that's clearly not working for me.

I'm open to better way to do this! As I said, I'm still very much learning.

import React, { Component, useState, useEffect } from 'react';
import { EditorState, Editor } from 'draft-js';
import { Container, Row, Col, Button } from "react-bootstrap"
import Navigation from '../Components/Navigation'


export function Draft() {
const [editorState, setEditorState] = useState(() => EditorState.createEmpty(),);

const onChange = () => {
//save code to go here
  setEditorState({
    editorState
  })
}

  return (
    <div className="dashboard">
      <Navigation />
      <Container fluid>
        <Row className="dashboard-announce">
          <Col><p>No Data</p></Col>
          <Col md={4}>
          <Editor
              editorState={editorState}
              onChange={onChange}
          />
          </Col>
          <Col md={6}></Col>
        </Row>
      </Container>
    </div>
  )
}    


export default Draft;

Upvotes: 1

Views: 821

Answers (1)

Dominic B&#252;tow
Dominic B&#252;tow

Reputation: 183

You don't need to wrap the editorState into an object in setEditorState.

This should work:

const onChange = () => {
//save code to go here
  setEditorState(editorState)
}

Upvotes: 2

Related Questions