When I write sth inside the input then click on the add, i add new li tag to underneath.But my problem is to delete this li tags. I added to fontawesome icon a handleDelete onclick event. But i could not solve how to delete this. I added bind, and handleDelete function on parent component but it does not work. Please help me.
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import React, { Component } from 'react';
import { findRenderedDOMComponentWithClass } from 'react-dom/test-utils';
class MyToDo extends Component {
constructor(props) {
super(props);
this.state = { items: [], text: '' };
this.handleInput = this.handleInput.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleInput(e) {
this.setState({ text: e.target.value });
}
handleSubmit(e) {
e.preventDefault();
const old = {
text: this.state.text,
id: Date.now(),
};
if (this.state.text === '') {
return;
}
this.setState({ items: this.state.items.concat(old), text: '' });
}
render() {
return (
<div className="text-center mt-5">
<form onSubmit={this.handleSubmit}>
<div className="form-group">
<input
placeholder="Enter todo"
className="p-3"
onChange={this.handleInput}
/>
</div>
<button type="submit" className="btn btn-primary mt-3">
ADD
</button>
</form>
<Index items={this.state.items} />
</div>
);
}
}
export default MyToDo;
class Index extends Component {
constructor(props) {
super(props);
}
handleDelete(e){
e.preventDefault()
this.setState({ text: e.target.value });
}
render() {
return (
<div>
{this.props.items.map((e) => (
<div
className="table-responsive mt-1 d-flex justify-content-center"
key={e.id}
>
<table className="table table-dark w-50 text-center mb-0">
<tbody>
<tr>
<th scope="row">
{e.text}
<i
onClick={this.handleDelete}
className="fas fa-window-close fa-2x float-end bg-danger"
></i>
</th>
</tr>
</tbody>
</table>
</div>
))}
</div>
);
}
}
ReactDOM.render(<MyToDo />, document.getElementById('root'));