I'm building a "todo" app for practicing & learning React basics. I have an array of objects from a file called TodosStores.js which I passed down as props to the TodoList ponent like so:

import TodoList from './ponents/TodoList';
import TodosStores from './stores/TodosStore';

function App() {
  return (
    <div className="App">
      <TodoList todos={TodosStores} />
    </div>
  );
}

export default App;

Now, I'm trying trying to toggle the property value of the current todopleted to true & false so I can remove/add the todo-item-pleted class. However, I'm getting this error: TypeError: Cannot create property 'pleted' on boolean 'true'. I am seeking some explanation of what I'm doing wrong here. I e from Vue background so probably there's another way of changing the state in React.

This is my ponent's code snippet:

import React, { Component } from 'react';
import './TodoListStyles.css'

class TodoList extends Component {
  constructor(props){
    super(props);
    
    this.state = { todos: this.props.todos }

    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(item) {
    return itempleted = !itempleted
  }

  render() {
    
    return (
      <ul className='todo-list'>
        { 
          this.props.todos.map(
            todo => 
            <React.Fragment key={todo.id}>
              <li className={`todo-item ${todopleted ? 'todo-item-pleted' : ''}`}>{ todo.title }</li>
              <input type='checkbox' onChange={this.handleChange(todopleted)} checked={todopleted} />
            </React.Fragment>
          ) 
        }
      </ul>
    )
  }
}

export default TodoList;

PS: I'm using React Class Components because I want to contribute to an open-source project which uses class ponents. I might try refactoring later to hooks.

I'm building a "todo" app for practicing & learning React basics. I have an array of objects from a file called TodosStores.js which I passed down as props to the TodoList ponent like so:

import TodoList from './ponents/TodoList';
import TodosStores from './stores/TodosStore';

function App() {
  return (
    <div className="App">
      <TodoList todos={TodosStores} />
    </div>
  );
}

export default App;

Now, I'm trying trying to toggle the property value of the current todo.pleted to true & false so I can remove/add the todo-item-pleted class. However, I'm getting this error: TypeError: Cannot create property 'pleted' on boolean 'true'. I am seeking some explanation of what I'm doing wrong here. I e from Vue background so probably there's another way of changing the state in React.

This is my ponent's code snippet:

import React, { Component } from 'react';
import './TodoListStyles.css'

class TodoList extends Component {
  constructor(props){
    super(props);
    
    this.state = { todos: this.props.todos }

    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(item) {
    return item.pleted = !item.pleted
  }

  render() {
    
    return (
      <ul className='todo-list'>
        { 
          this.props.todos.map(
            todo => 
            <React.Fragment key={todo.id}>
              <li className={`todo-item ${todo.pleted ? 'todo-item-pleted' : ''}`}>{ todo.title }</li>
              <input type='checkbox' onChange={this.handleChange(todo.pleted)} checked={todo.pleted} />
            </React.Fragment>
          ) 
        }
      </ul>
    )
  }
}

export default TodoList;

PS: I'm using React Class Components because I want to contribute to an open-source project which uses class ponents. I might try refactoring later to hooks.

• javascript
• reactjs
• event-handling
• state

Share Improve this question Follow edited Apr 8, 2021 at 21:03 halfer 20.3k1919 gold badges109109 silver badges202202 bronze badges asked Apr 3, 2021 at 20:01 Manuel AbascalManuel Abascal 6,36077 gold badges4545 silver badges7777 bronze badges 0

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

The reason you are getting error TypeError: Cannot create property 'pleted' on boolean 'true' is because you are passing boolean value to handleChange in onChange={this.handleChange(todo.pleted)} and in the function you are creating/mutating item.pleted. It can not create property pleted on true or false basically.