CODEWITHSUNDEEP
reactjsreact-reduxjsx
Aymane Lassfar
Aymane Lassfar

Reputation: 141

How to resolve 'deletePerson is not a function' inside onClick in react js?

This is the AppComponent where the functions are placed (container component) :


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;

This is the MainComponent where the list of persons is shown (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

There is where the error is handled from the MainComponent (note that I use const in MainComponent)

<button onClick={() => {deletePerson(person.id)}}>Delete</button>

The list of persons is displayed correctly but when I click in the Delete Button, I got the error deletePerson is not a function. How to solve this error ?

Upvotes: 1

Views: 899

Answers (3)

Aymane Lassfar
Aymane Lassfar

Reputation: 141

1 • I solved the issue, in the MainComponent I must put personProfil as rendered in App.js with the braces { ... } :

const MainComponent = ({personProfil, deletePerson}) => {

Instead of 

const MainComponent = (profiles, deletePerson) => {

Because in App.js I used profiles like that const MainComponent = (profiles, .. but did not work because I was wrong to set //get all element from App const { personProfil } = profiles I removed it.

2 • I changed it to personProfil as I rendered it in the : <MainComponent personProfil={this.state.profiles} .... /> in App.js :

render() {
    return (
      <div className="App">
        <MainComponent personProfil={this.state.profiles} deletePerson={this.deletePerson} />
        <AddPerson addPerson={this.addPerson} />
      </div>
    );

Upvotes: 0

Enchew
Enchew

Reputation: 1001

Normally functional components accept props. If you want to have them destructured, try the following syntax (add braces {}) :

const MainComponent = ({personProfil, deletePerson}) => {
    //get all element from App

    //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

Upvotes: 3

Salmin Skenderovic
Salmin Skenderovic

Reputation: 1720

Change

const MainComponent = (profiles, deletePerson) => {

To

const MainComponent = ({profiles, deletePerson}) => {

Because you are passing props you need to extract those props through props.profiles, props.deletePerson. You can do this simply by "Destructuring"

https://hacks.mozilla.org/2015/05/es6-in-depth-destructuring/

Upvotes: 3

Related Questions