Updated: Class component rendering in DOM twice when I was expecting once.

19 days ago - Direct link

I posted a few days ago but only posted my simplified version I was using trying to debug..

The problem I am having is that my "todoitems" are rendering twice in the DOM. Only in class components though. the same code works fine as functional components.


  • I pass initialTodos into state of App(),

  • then pass them to TodoList as a "todos" prop.

  • then map the todos into a list of components,

And for some reason the TodoItem components are rendering twice in the DOM.

Reading online it says that this is due to "StrictMode" and something to do with helping debug. General consensus is that it's not supposed to actually show up in the DOM though.. so am i doing something wrong?

import React, { useState } from "react";

import "./App.css";

const initialTodos = [
{
id: 0,
title: "Buy Radishes",
isCompleted: true,
},
{
id: 1,
title: "Charge phone",
isCompleted: false,
},
];

class TodoItem extends React.Component {
constructor(props) {
super(props);
}

render() {
return

  • {this.props.title}
  • ;
    }
    }

    class TodoList extends React.Component {
    constructor(props) {
    super(props);
    this.incompleteTodos = [];
    }

    render() {
    this.props.todos.map((elem) => {
    this.incompleteTodos.push();
    });
    return (

    Incomplete Todos


      {this.incompleteTodos}


    );
    }
    }

    class App extends React.Component {
    constructor(props) {
    super(props);

    this.state = {
    todos: initialTodos,
    };
    }

    render() {
    return (



    );
    }
    }

    export default App;


    Go to article →