onChange() fires twice making changes to checkboxes impossible (react app) - reactjs

Question

I did a tutorial on Scrimba (it's a website with an in-browser IDE) that had this code as one of the exercises. And it worked fine in that environment. But when I imported it into VS code and ran it using "npm start" I noticed my checkbox "onChange" events would fire twice. This caused them to not work as they essentially toggle back to the value they start at.
After this you'll see the code from the two files from the project. App.js is where the function handleChange() is defined. It is then sent as a prop to the TodoItem.js functional component. That component runs this function whenever someone clicks a checkbox. But for some reason, it runs twice in a row. I tried using onClick too and the same happens.
App.js
import React from "react"
import TodoItem from "./TodoItem"
import todosData from "./todosData"
import "./style.css"
class App extends React.Component {
constructor() {
super()
this.state = {
todos: todosData
}
this.handleChange = this.handleChange.bind(this)
}
handleChange(id) {
this.setState((prevState) => {
console.log("this gets printed 2 times")
const updatedTodos = prevState.todos.map(todo => {
if (todo.id === id) {
todo.completed = !todo.completed
}
return todo
})
return {
todos: updatedTodos
}
})
}
render() {
const todoItems = this.state.todos.map(item => <TodoItem key={item.id} item={item} handleChange={this.handleChange}/>)
return (
<div className="todo-list">
{todoItems}
</div>
)
}
}
export default App
TodoItem.js:
import React from "react"
function TodoItem(props) {
const completedStyle={
textDecoration: "line-through",
fontStyle: "italic",
color: "#cdcdcd"
}
return (
<div className="todo-item">
<input
type="checkbox"
checked={props.item.completed}
onChange={() => props.handleChange(props.item.id)}
/>
<p style={props.item.completed ? completedStyle : null}>{props.item.text}</p>
</div>
)
}
export default TodoItem

Answer 1

Do you have your App component wrapped in React.StrictMode by any chance? Also, you could try putting event.preventDefault() inside your onChange().