Reactive prop and inner state

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.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 (
        toolbarClassName={`toolbarAbsoluteTop ${this.props.toolbarClassName}`}





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

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)

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

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.

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