The value of the editor is not updated

I have an issue in my app where I’m using the editor.

I use the editor in a CMS like applications. There is no issue in the first use of the editor in the app, the init value is correct. But when I change the current “edited page”, the field still displayed the old value (previous edited page). I still can edit the editor, and it’s ok, but the “init value” is wrong.

The value is correctly set as you can see in the screenshot but the value displayed is wrong. I tried many things but I failed to solve this.

Could you help me on that?

Here is a screenshot (as you can see the input above the editor works properly, it’s not a react issue)

Here is the code:

          <SimpleMDE
            onChange={this.props.setArticleDescription}
            value={content.description}
            options={{
              autoDownloadFontAwesome: false,
              hideIcons: [
              ...
              ],
              spellChecker: false,
              status: false
            }}
          />

[haench]

Hi,

I ran into the same issue: I think it is realted to componentDidUpdate this part

    if (
      !this.state.keyChange &&
      this.props.value !== this.state.value && // This is somehow fixes moving cursor for controlled case
      this.props.value !== prevProps.value // This one fixes no value change for uncontrolled input. If it's uncontrolled prevProps will be the same
    ) {
      this.simpleMde!.value(this.props.value || "");
    }

the state is not correctly updated when props change.

A simple trick solved the issue: I provided a key attribute with a unique id. Thats makes sure the component is rerendered on props change (I think): <SimpleMDEReact key={unique_id} value={my_value} onChange={value => onChange} />

[patmood]

This bug depends if the component is controlled or uncontrolled and any solutions should test both cases.

I’m using it as a controlled component and fixed the issue by removing all references to state, since it’s not required. I’ll try creating a PR that handles both cases.