Two react-quill instances produces errkr

[hmontes]

https://codepen.io/anon/pen/ZJBWGO

If we call two times react-quill (Example. New comment and new replies like any social media). The second instance works bad. The template changes and the buttons don't work.

You can see the problem in the codepen.

Thanks

[alexkrolick]

Your example reuses the same ID for both toolbars

You can tweak it like this to take a prop for the toolbar ID instead: https://codepen.io/alexkrolick/pen/mMOPmv?editors=0010

Sorry for any confusion!

[hmontes]

Do you have another method with a random id or continuous numbers? In the worst cases, the user can have multiple editor (I can avoid that. But just in case)

[alexkrolick]

See the last line where the editors are mounted - you can use any code there to generate a sequence of IDs.

[hmontes]

Okey. I'll try. Thank you

[hmontes]

I find another and better way. Require the library shortid

Outside the class

const CustomToolbar = ({shortId}) => (
  <div id={shortId}>
    <button className="ql-bold"></button>
    <button className="ql-italic"></button>
    <button className="ql-underline"></button>
    <button className="ql-insertStar" type="button">
      <CustomButton />
    </button>
    
  </div>
)

Class

class Editor extends React.Component {
  constructor(props) {
    super(props)
    this.state = { text: '' }
    this.handleChange = this.handleChange.bind(this)
    this.shortId = shortid.generate()
  }


  modules = (shortId) => {
    return {
      toolbar: {
        container: "#" + shortId,
        handlers: {
          "insertStar": insertStar,
        }
      }
    }
  }

  ... stuff like formats and handleChange

  render() {
    return (
      <div>
        <CustomToolbar shortId={this.shortId}/>
        <ReactQuill value={this.state.text}
          modules={this.modules(this.shortId)}
         ...
        />
      </div>
    )
  }

Works because the ID in unique. Enjoy