The container element (object HTMLDivElement) is not empty. Make sure the container is empty and call render() again

Question

The problem

I'm using gridjs-react and I'm getting the following error:

[Grid.js] [ERROR]: The container element [object HTMLDivElement] is not empty. Make sure the container is empty and call render() again

The code

import React from 'react'
import { Grid } from "gridjs-react";
import "gridjs/dist/theme/mermaid.css";


const Grid1 = () => {
    return (
        <Grid
            data = {[
                ['John', '[email protected]'],
                ['Mike', '[email protected]']
                ]}
            columns = {['Name', 'Email']}
            search = {true}
            sort={true}
        />
    )
}

export default Grid1

Does anyone know how to solve it?

Answer 1

Don t know react but i don t see a render to a div in ? The div should be empty event between the and (no spaces or return)

Answer 2

I know this is an old question, but I just got a similar error, so posting for future visitors. In my case, it was that there was a grid.render() call in a hook that gets called multiple times (useEffect or componentDidUpdate or the like). There's no issue calling render on your grid the first time, but trying to do it again is going to throw this error. (On any subsequent updates, you'll want to call grid.updateConfig({your new config args here}).forceRender(), not render()). My guess is in some other part of your code, you have render getting called multiple times.