Жесть какая. Есть 2 кнопки - удалить и добавить. Кнопки почти одинаковые, но добавить не работает совсем, уже не знаю в чем проблема...Кучу времени всадил на это, помогите пожалуйста.
Это связанно с использованием findIndex? Или [...data что так делаю? Вроде я их менял на другие способы но также...
Вот три части:
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
data: [
{ label: "GGWPLANAYA", important: true, id: 1 },
{ label: "SOMNUS", important: false, id: 2 },
{ label: "PAPARAZZI", important: false, id: 3 }
]
};
this.deleteItem = this.deleteItem.bind(this);
this.addItem = this.addItem.bind(this);
this.maxId = 4;
}
deleteItem(id) {
this.setState(({ data }) => {
const index = data.findIndex(elem => elem.id === id);
const newArr = [...data.slice(0, index), ...data.slice(index + 1)];
return {
data: newArr
}
});
}
addItem(body) {
const Arr = {
label: body,
important: false,
id: this.maxId++
};
this.setState = (({ data }) => {
return {
data: [...data, Arr]
}
});
}
render() {
return (
<div className="app" >
<AppHeader />
<div className="search-panel d-flex">
<SearchPanel />
<PostStatusFilter />
</div>
<PostList posts={this.state.data} onDelete={this.deleteItem} />
<PostAddForm onAdd={this.addItem} />
</div>
)
}
}
////// POST__ADD__FORM
import React from "react";
import "./post-add-form.css";
const PostAddForm = ({ onAdd }) => {
return (
<div className="buttom-panel d-flex">
<input
placeholder="О чем вы думаете?"
className="form-control new-post-label"
/>
<button type="submit" className="btn btn-outline-secondary" onClick={() => onAdd('hello')}>
Добавить
</button>
</div>
);
};
export default PostAddForm;
и третий...
import React, { Component } from "react";
import "./post-list-item.css";
export default class PostListItem extends Component {
constructor(props) {
super(props);
this.state = {
important: false,
like: false,
};
this.onImportant = this.onImportant.bind(this);
this.onLike = this.onLike.bind(this);
}
onImportant() {
this.setState(({ important }) => ({
important: !important,
}));
}
onLike() {
this.setState(({ like }) => ({
like: !like,
}));
}
render() {
const { label, onDelete } = this.props;
const { like, important } = this.state;
let classNames = "app-list-item d-flex justify-content-between";
if (important === true) {
classNames += " important";
}
if (like === true) {
classNames += " like";
}
return (
<div className={classNames}>
<span className="app-list-item-label " onClick={this.onLike}>
{label}
</span>
<div className="d-flex justify-content-center align-items-center">
<button
type="button"
onClick={this.onImportant}
className="btn-star btn-sm"
>
<i className="fa fa-star"></i>
</button>
<button type="button" className="btn-trash btn-sm" onClick={onDelete} >
<i className="fa fa-trash-o"></i>
</button>
<i className="fa fa-heart"></i>
</div>
</div>
)
}
}