print the updated version of the array in reactjs

Question

I'm trying to delete a data in array using the filter function which return a new array. The problem is how do I push the updated version of the array to the original version?, or if I can't do that, how do I print only the updated version?

here is my state:

export class App extends React.Component {
  constructor() {
    super();
    this.state = {
      todos: [
        id: 1, nama: 'belajar', status: 'belum selesai',
        id: 2, nama: 'kuliah', status: 'belum selesai',
        id: 3, nama: 'sekolah', status: 'belum selesai',
        id: 4, nama: 'makan', status: 'belum selesai'
      ]
    };
    this.state = { value: '' };
    this.state = { isReady: false };
    this.sayHello = this.sayHello.bind(this);
    this.teken = this.teken.bind(this);
    this.done = this.done.bind(this);
  }
}

here is my code:

done(event) {
  this.setState({ isReady: true });
  var str = event.target.value;
  var arr = str.split();
  console.log(this.state.todos);
  const list = todos.filter((todos) => todos.nama !== event.target.value);
  console.log(list);
  this.setState({ todos: list });
  this.setState({ nama: event.target.value });
  todos.push({
    id: event.target.name,
    nama: event.target.value,
    status: 'selesai'
  });
  const find = todos.hasOwnProperty(event);
  if (find) {
    this.setState({ stat: find });
  } else {
    this.setState({ stat: find });
  }
  event.preventDefault();
}

and here is how I print my array

<ul className='list-group list-group-flush'>
  {todos.map((todos) => {
    if (todos.status === 'belum selesai')
      return (
        <li className='list-group-item'>
          {todos.id} {todos.nama}
          <button
            value={todos.nama}
            name={todos.id}
            className='btn form-control form-control-sm col-sm-4 bg-light rounded-pill'
            onClick={this.done}
          >
            Done {todos.id}
          </button>
        </li>
      );
    else
      return (
        <li className='list-group-item'>
          <s>
            {todos.id} {todos.nama}
          </s>
        </li>
      );
  })}
</ul>

Answer 1

You are very close. In order to update the list item HTML elements in your component you need to update the list of todos in your state.

done(event) {
  // Copy to a new variable. 
  const nextTodos = this.state.todos.slice();

  // Modify however you want.
  nextTodos.push({ nama: 'new item' });

  // Update the todos. You were missing this part!
  this.setState({ todos: nextTodos });
}

In your render function reference this.state.todos like you are doing now.

In the component constructor, set the initial state.

constructor(props) {
  super(props);
  this.state = {
    todos: [
      // initial todo data
    ],
  };
}