Reactive prop and inner state

react
1

I have a component

import React, { Component } from 'react'
import { EditorState, convertToRaw } from 'draft-js'
import { Editor } from 'react-draft-wysiwyg'
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css'
import draftToHtml from 'draftjs-to-html'

import toolbarOptions from './JpuriTextEditorOptions'

export default class TextEditor extends Component {
  state = {
    editorState: this.props.editorState
  }

  componentWillReceiveProps = nextProps => {
    console.warn('componentWillReceiveProps')
    console.log('nextProps.editorState', nextProps.editorState)
    console.log('this.props.editorState', this.props.editorState)

    this.setState({editorState: nextProps.editorState})
  }

  onEditorStateChange = editorState => this.setState({editorState})

  onBlur = () => this.props.onBlur({key: this.props.myKey, value: draftToHtml(convertToRaw(this.state.editorState.getCurrentContent()))})

  render () {
    return (
      <Editor
        wrapperClassName={this.props.wrapperClassName}
        editorClassName={this.props.editorClassName}
        toolbarClassName={`toolbarAbsoluteTop ${this.props.toolbarClassName}`}

        wrapperStyle={this.props.wrapperStyle}
        editorStyle={this.props.editorStyle}
        toolbarStyle={this.props.toolbarStyle}

        editorState={this.state.editorState}
        onEditorStateChange={this.onEditorStateChange}
        onChange={this.props.onChange}

        toolbarOnFocus
        toolbar={toolbarOptions}

        onFocus={this.props.onFocus}
        onBlur={this.onBlur}
        onTab={this.props.onTab}
      />
    )
  }
}

I pass to it a reactive prop, this.props.editorState
Then I set it inside the internal state to handle changes there. And only onBlur I save my changes to the mongo db.

Now there is a problem.
Whenever I click on the editor I see componentWillReceiveProps logs a few times. And it happens on every change thus I am not able to use my editor component properly. As it’s cursor is being reset to the first letter with every click and change.

I am using this library of draftjs https://github.com/jpuri/react-draft-wysiwyg

2

I haven’t worked with draftjs, but kinda sounds like the state holding the text is not getting updated or is getting reset.

Also I just solved an issue with a child prop not updating when setting it with a state variable with same name; I changed the state name to differ from the prop name and it started working. (sounds like a bug though but will keep watching it)

3

Sorry I do not understand what you mean, could you please explain further or give some example?

4

Not sure if this is a solution to your problem, but at first my prop was not passing correctly to the child component when I had

<ChildComponent passProp={this.state.passProp} />

so basically I just changed the names to differ like

<ChildComponent passedProp={this.state.passProp} />

and it started working whereas at first it was getting undefined for the passProp value in the ChildComponent.

5

Thanks for your explanation alas it is not solving my issue.