React-quill double instance fix

React-quill is a toolkit for react which implement the Quilljs editor in react application.

When you trying to implement the react-quill into a modern React application you may got double instance of the Editor 👇. I don’t know why it is happening, 😔.

React-quill editor

Fix

The problem her is not with the versions but the react-dom/client(🤔). My regular index.js look like this.

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);
 
reportWebVitals();

To fix our current issue I replace index.js as following with ReactDom.render method and the problem will melt away. 😊

import ReactDOM from "react-dom";
import React from "react";
import App from "./App";

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
 
reportWebVitals();

If anybody have a better solution for this, please leave in the comment section.

• How to run HugginFace models in JavaScript
• How to run HugginFace models in Python
• Fix Panda dataframe errors for Backtrader
• Array map to new type in TypeScript
• Intel M1 chip vs Apple M1 silicon chip
• How to add Menu to Mac App in SwiftUI
• The AI Presence in WordPress
• How to use Swift CoreData
• What are the steps to use Swift Core Data ?
• What is Swift CoreData ?