Open bolatuly opened 4 years ago
Hey @bolatuly, could you figure out a workaround to this?
Have you found the solution? still stuck on it
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
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.
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>
);
}
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.
Any workaround to this?
Thank you in advance for your help. Hope this repo still alive.