Всем привет, подскажите как удалить выбранный элемент из массива в react.js. То есть у меня есть кнопка по нажатию, на которую должен удаляться выбранный элемент. А так же буду рад, если на основе того же кода поможете мне реализовать редактирование элемента в модальном окне. Заранее всем спасибо и прошу поподробнее объяснить все действия (как для тупой).
Код app.js
import React, {
useState
} from "react";
import Modal from "./Modal/Modal";
import Tables from "./Tables/Tables";
import './App.css';
function travell(Products) {
return Products.name;
}
function App() {
const [Products, setProducts] = useState([{
name: "one",
count: "1",
id: 1
},
{
name: "two",
count: "1",
id: 2
},
{
name: "third",
count: "2",
id: 3
}
]);
const addProduct = (product) => {
setProducts([...Products, product]);
};
return ( <div>
<h1 style = {{textAlign: "center"}}>
Product
</h1>
<Tables Products = {Products}/>
<Modal add = { addProduct}/>
</div>
);
}
export default App;
Код Modal.js
import React from "react";
import './Modal.css'
export default class Modal extends React.Component {
constructor(props) {
super(props);
this.state = {
isOpen: false
};
this.nameInput = React.createRef();
this.countInput = React.createRef();
this.addHandler = this.addHandler.bind(this);
}
addHandler() {
const name = this.nameInput.current.value;
const count = this.countInput.current.value;
this.props.add({ name, count });
this.setState({ isOpen: false });
}
render() {
return (
<React.Fragment>
<button
style={{ left: "40%", position: "relative" }}
onClick={() => this.setState({ isOpen: true })}
>
Open modal
</button>
{this.state.isOpen && (
<div className="modal">
<div className="modal-body">
<h1>Product</h1>
<p>Name</p>
<input ref={this.nameInput} type="text" />
<p>Count</p>
<input ref={this.countInput} type="number" />
<button onClick={this.addHandler}>Add</button>
</div>
</div>
)}
</React.Fragment>
);
}
}
Код для Table.js
import React from 'react';
import '../App.js';
import './Tables.css';
import Modal from "../Modal/Modal";
function Tables (props) {
<Modal />
return (
<div>
<table>
<tr>
<td>
Product
</td>
<td>
Count
</td>
</tr>
{props.Products.map((item,i)=><tr key={i}>
<td>{item.name}</td>
<td>{item.count}</td>
<button onDelete ={() => {} }>delete</button>
</tr>
)}
</table>
</div>
)
}
export default Tables