The Editor component does not accept a value in its prop defaultValue!

[DanielO]

The Editor component does not accept a value in its defaultValue unless we use a string literal and not a variable or another attribute with a value like string.

my code on the render method is this:

render() {
        return (
          <form id="form-project-editor" onSubmit={this.handleSubmit}>
            <Editor
              name="main-editor"
              defaultValue={this.state.value}
              onChange={this.handleChange}
              onDrop={this.handleDrop}
              editorRef={this.setRef}
            >...

[Sergio Xalambrí]

Check the full usage example, it creates a constant defaultValue with a template string and use it as the defaultValue of the Editor. If you are using the this.state.value I suppose you are trying to change that state and expecting to change the value?

The field is called defaultValue because it's that, the default one, not the current value, the Editor keep it's own value and the default one it's used only when creating the editor. It's like the <input /> prop called defaultValue, only works when mounting the component.

If you want to externally change the internal value then use the editorRef and call this.editor.writeValue({ target: { value: 'your new value' } })

[DanielO]

Thanks Sergio ...
I have already resolved with an if statement so:

render() {
        return (
          <form id="form-project-editor" onSubmit={this.handleSubmit}>
            {
                this.state.value ?
                    <Editor
                    name="main-editor"
                    defaultValue={this.state.value}
                    onChange={this.handleChange}
                    onDrop={this.handleDrop}
                    editorRef={this.setRef}
                    >
                        <ButtonBar>
                        <ButtonGroup>
                        <Bold><strong>B</strong></Bold>
                        <Italic><em>I</em></Italic>
                        <Underline>U</Underline>
                        </ButtonGroup>

                        <ButtonGroup>
                        <Code>Insert code</Code>
                        <Link>Link</Link>
                        <Image>Image</Image>
                        </ButtonGroup>

                        <ButtonGroup>
                        <OrderedList><i className="fa fa-list-ol"></i></OrderedList>
                        <UnorderedList>UL</UnorderedList>
                        <Quote>Q</Quote>
                        <Heading>H</Heading>
                        <Youtube>Y</Youtube>
                        </ButtonGroup>
                        </ButtonBar>

                        {/* you can use any DOM element or event custom components */}
                        <div>
                        {/* you can force an initial height for the field if it's server rendered */}
                        <Field />
                        <Preview />
                        </div>

                        <EmojiBar />
                    </Editor>
                : ''
            }
            <button type="submit">Send form</button>
          </form>
        )
    }

and making like you tell me this.editor.writeValue({ target: { value: 'your new value' } }), it execute the next error::

component-0384b673f7.js:1266 Warning: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op. Please check the code for the PulseEditor component.

[Sergio Xalambrí]

That error happens because you are unmounting the editor, you need to call that after the editor is mounted and before is unmounted. If you are unmounting it when your state is empty then it's going to break. Btw, I don't recommend you to do that, you creating a new editor (and buttons, field, preview, etc0 instance.

Also why do you want to control the editor internal value? you can access it with onChange if you need to save and send it via AJAX but you can let the editor control it and update it when the user write inside the editor or use buttons.

[DanielO]

the aclaration is correct, I did this:

componentDidMount() {
        this.props.fetchContent.then(response => {
            this.editor.writeValue({ target: { value: response.texto_contenido } })
        });
    }

    componentWillUnmount() {
        this.editor.writeValue({ target: { value: '' } })
    }

Thanks Sergio.

[Sergio Xalambrí]

You don't need to clear the editor value before unmounting