TypeError: Cannot read property 'getEditorState' of undefined

[paigeflourin]

had an error while implementing this on my project:

i get this error when i render it with an existing text:

Uncaught (in promise) TypeError: Cannot read property 'getEditorState' of undefined at e.value (react-rte.js:11).

here is my component created using React-Rte

import * as React from 'react';
import CreatableSelect from 'react-select/lib/Creatable';
import styles from '../QnAForm/QnAForm.module.scss';
import * as _ from "lodash";
import RichTextEditor from 'react-rte';

export default class QnAAnswerInput extends React.Component<any,any> {
public state = {
    inputValue: '',
    value: RichTextEditor.createEmptyValue()
};


public onChange = (value) => {
    this.setState({value});
    if (this.props.onChanged) {
      // Send the changes up to the parent component as an HTML string.
      // This is here to demonstrate using `.toString()` but in a real app it
      // would be better to avoid generating a string on each change.
      this.props.onChanged(
        value.toString('html')
      );
    }
  }

public render() {
    console.log(this.props.value);
    const { value } = this.props.value;


  const toolbarConfig = {
    // Optionally specify the groups to display (displayed in the order listed).
    display: ['INLINE_STYLE_BUTTONS', 'BLOCK_TYPE_BUTTONS', 'LINK_BUTTONS', 'BLOCK_TYPE_DROPDOWN', 'HISTORY_BUTTONS'],
    INLINE_STYLE_BUTTONS: [
      {label: 'Bold', style: 'BOLD', className: 'custom-css-class'},
      {label: 'Italic', style: 'ITALIC'},
      {label: 'Underline', style: 'UNDERLINE'}
    ],
    BLOCK_TYPE_DROPDOWN: [
      {label: 'Normal', style: 'unstyled'},
      {label: 'Heading Large', style: 'header-one'},
      {label: 'Heading Medium', style: 'header-two'},
      {label: 'Heading Small', style: 'header-three'}
    ],
    BLOCK_TYPE_BUTTONS: [
      {label: 'UL', style: 'unordered-list-item'},
      {label: 'OL', style: 'ordered-list-item'}
    ]
  };

  const style = _.isEmpty(value) ? {}  : {display: 'none'};
    return ( 
    <div> 
        <RichTextEditor
            toolbarConfig={toolbarConfig}
            value={value}
            onChanged={this.onChange}
        />
         <span className={styles.requiredLabel} style={style}>* required </span> 
    </div>
    
    );
}
}:

and i call this component using:

 return (
      <div>
        <QnAAnswerInput 
            value={SOME TEXT VALUE} 
            onChanged={data => this.updateQnAAnswer(data, cellInfo)}
        />
      </div>
    );

[7c]

same here

[srianbury]

I had this issue as well but I had only copied the following into an existing component of mine.

<RichTextEditor 
  value={this.state.value}
  onChange={this.onChange}/>

I added the the onChange method and added the state in my constructor. It looks like this now and everything works fine:

import RichTextEditor from 'react-rte';

export class Input extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            value: RichTextEditor.createEmptyValue()
        };
    }

    onChange = (value) => {
        this.setState({value});
        if (this.props.onChange) {
          // Send the changes up to the parent component as an HTML string.
          // This is here to demonstrate using `.toString()` but in a real app it
          // would be better to avoid generating a string on each change.
          this.props.onChange(
            value.toString('html')
          );
        }
    };
    
    render(){
        return(
            <div>
                <RichTextEditor 
                    value={this.state.value}
                    onChange={this.onChange}/>
            </div>
        );
    }
}```

[nicollaseng]

@srianbury thanks for your answer it works like a charm for me. It appears that we need to add a function for onChange propertie and add value: RichTextEditor.createEmptyValue() to this.state at constructor

[mohshbool]

Having the same problem

react-rte: "0.16.1"

import React from 'react';
import RichTextEditor from 'react-rte'

export default class Add extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: RichTextEditor.createEmptyValue(),
    }
  }

  onChange = (value) => {
    this.setState({value});
    if (this.props.onChange) {
      // Send the changes up to the parent component as an HTML string.
      // This is here to demonstrate using `.toString()` but in a real app it
      // would be better to avoid generating a string on each change.
      this.props.onChange(
        value.toString('html')
      );
    }
  };

  render() {
    return (
      <div>
        <RichTextEditor 
          editorState={this.state.value} 
          onChange={this.onChange}
        />
      </div>
    );
  };
}

EDIT: fixed it by changing editorState to value

[tremmorkeep]

All well and good, except with typescript + NextJS (vomit)

I am forced to use NextJS so loading RTE as dynamic: const RichTextEditor = dynamic( () => import('react-rte'), { ssr: false } )

p.s. I LOATHE NextJS.......

[tremmorkeep]

nm, found another package to use.