Function passed as Route prop - TypeError: this.props.handleOnDeleteInApp is not a function

Question

I'm trying to access a function declared in App.js, which has been passed as a prop on a route. However, the component (ListItem) rendered by the route compains that

TypeError: this.props.handleOnDeleteInApp is not a function

Relevant code: app.js

export default class App extends Component {

  constructor(props) {
    super(props);
    this.state = {
      items: [{"_id":{"$oid":"5f1fda0169e133382277a4ef"},"title":"Blabla","description":"adfadfd211233","__v":0}]
    }

    this.handleOnUpdate = this.handleOnUpdate.bind(this);
    this.handleOnDelete = this.handleOnDelete.bind(this);
  }

  componentDidMount() {
    ...

  }

  ...

  handleOnDelete() {
    console.log('Deleting from app.js')
    Axios.get('http://localhost:4200/items/delete/'+this.props.obj._id)
    .then(console.log('Deleted'))
    .catch(err => console.log(err))
    this.handleOnUpdate();
  }

  render() {
    return (
      <Router>
        <Navbar bg="dark" variant="dark">
          <Navbar.Brand>To Do App</Navbar.Brand>
          <Nav.Link as={Link} to="/add">Add</Nav.Link>
          <Nav.Link as={Link} to="/index">List</Nav.Link>
        </Navbar>

        <Container style={{ marginTop: 50 }}>
          <Switch>
                    ...

            <Route path='/index' render={(props) => <ListItem {...props} handleOnUpdate={this.handleOnUpdate} hanldeOnDeleteInApp={this.handleOnDelete} items={this.state.items} />} />
          </Switch>
        </Container>

      </Router>
    );
  }
}

ListItem.js

export default class ListItem extends Component {

    constructor(props) {
        super(props);

        this.handleOnUpdate = this.handleOnUpdate.bind(this);
        this.handleExport = this.handleExport.bind(this);
        this.handleOnDelete = this.handleOnDelete.bind(this);
    }

    ...

    itemRow = () => {
        var that = this;
        return this.props.items.map(function (object, i) {
            return <ItemRow obj={object} key={i} onDelete={that.handleOnDelete} onUpdate={that.handleOnUpdate} />
        })
    }
    ...

    handleOnUpdate() {
        this.props.handleOnUpdate();
    }

    handleOnDelete() {
        this.props.handleOnDeleteInApp();
    }


    render() {
        return (
            <Container>
                <table className="table table-striped">
                    <thead>
                        <tr>
                            <td>Title</td>
                            <td>Description</td>
                        </tr>
                    </thead>
                    <tbody>
                        {this.itemRow()}
                    </tbody>
                </table>
                <ExportItem handleExport={this.handleExport} />
            </Container>
        )
    }
}

ItemRow.js

class ItemRow extends Component {
    constructor(props) {
        super(props);
        this.onDelete = this.onDelete.bind(this);
    }

    onDelete = () => {
        this.props.onDelete();
    }

    render() {
        return (
            <tr>
                ...                   
                    <button onClick={this.onDelete} className="btn btn-danger">Delete</button>
            </tr>
        );
    }
}

export default ItemRow;

As my function props get passed normally from ItemRow to ListItem, I'm lead to believe that something is up with passing a function as a prop to a Route.

Anyone spot the error here?

Answer 1

Typo error in route <Route path='/index' render={(props) => <ListItem {...props} handleOnUpdate={this.handleOnUpdate} hanldeOnDeleteInApp={this.handleOnDelete} items={this.state.items} />} />

hanldeOnDeleteInApp should be handleOnDeleteInApp