Unable to update toolbar options after mount

[bolatuly]

I'm trying to dynamically change toolbar options based on user preferences. But seems like we can't change toolbar props after a component has been mounted. I made a simple example below of what I'm trying to achieve.

import React, {useState} from "react";
import "./styles.css";

import { Editor } from 'react-draft-wysiwyg';
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';

export default function App() {

  const one = ['inline', 'blockType'];
  const two = ['inline'];

  const [options, setOptions] = useState(two);

  const onClick = () => {
    setOptions(one); 
  }

  return (
    <div className="App">
    <button onClick={onClick}>Switch</button>
    <Editor 
      toolbar={{options}}
      />
    </div>
  );
}

Any workaround to this?

Thank you in advance for your help. Hope this repo still alive.

[Nachoferra1894]

Hey @bolatuly, could you figure out a workaround to this?

[rakibsxyz]

Have you found the solution? still stuck on it

[jestrickler]

Add some dummy state and update it when you change options to force the component to update https://stackoverflow.com/questions/65284303/how-to-force-an-update-for-a-functional-component

[rakibsxyz]

thanks for the reply. I tried this one but still not working. const [toolbarToggle, setTollbarToggle] = useState(false)

changed the setTollbarToggle state when options change but still its not working. May be its mounted and the options don't rerender after the first render.

[jestrickler]

try this, it worked for me:

import React, { useState } from "react";
import "./styles.css";

import { Editor } from "react-draft-wysiwyg";
import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css";

export default function App() {
  const one = ["inline", "blockType"];
  const two = ["inline"];

  const [options, setOptions] = useState(two);

  const onClick = () => {
    console.log('options', options)
    setOptions(JSON.stringify(options) === JSON.stringify(one) ? two : one);
  };

  return ( 
    <div className="App">
      <button onClick={onClick}>Switch</button>
      <Editor key={options} toolbar={{ options }} />
    </div>
  );
}