print the updated version of the array in reactjs - 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
],
};
}