Это AppComponent , где размещены функции (компонент контейнера):
import React, { Component } from 'react';
import './App.css';
import MainComponent from './MainComponent/MainComponent';
import AddPerson from './MainComponent/AddPerson';
class App extends Component {
state = {
profiles : [
{ id: 1, name: "Ayman", age: 21, job: "Web developer" },
{ id: 2, name: "Mark", age: 20, job: "Desktop developer" },
{ id: 3, name: "Elena", age: 22, job: "Mobile developer" },
{ id: 4, name: "Mohamed", age: 25, job: "Database manager" }
]
}
//add new record
addPerson = (person) => {
let newperson = [...this.state.profiles, person];
this.setState({
profiles: newperson,
})
}
//delete record by id
deletePerson = (idToDel) => {
let persons = this.state.profiles.filter(person => {
return person.id !== idToDel;
});
this.setState({
persons: persons,
})
}
render() {
return (
<div className="App">
<MainComponent personProfil={this.state.profiles} deletePerson={this.deletePerson} />
<AddPerson addPerson={this.addPerson} />
</div>
);
}
}
export default App;
Это MainComponent , где список лиц отображается (UI Component):
//This is UI component
import React from 'react' ;
const MainComponent = (profiles, deletePerson) => {
//get all element from App
const { personProfil } = profiles;
//assign all the elements in a constant
//get person profiles
const profilesList = personProfil.map(person => {
if (person.age > 15) {
return (
<div className="person-content" key={person.id}>
<div>ID: {person.id}</div>
<div>Name: {person.name}</div>
<div>Age: {person.age}</div>
<div>Work as: {person.job}</div>
<button onClick={() => {deletePerson(person.id)}}>Delete</button>
</div>
)}
else {
return null;
}
})
//*** show data ***
return (
<div className="profile-list">
{ profilesList }
</div>
)
}
export default MainComponent
Там, где ошибка обрабатывается из MainComponent (обратите внимание, что я использую const
в MainComponent)
<button onClick={() => {deletePerson(person.id)}}>Delete</button>
Список людей отображается корректно, но когда я нажимаю кнопку «Удалить», я получаю ошибку deletePerson не является функцией . Как решить эту ошибку?