How to delete an item on the front end from a list of items in ReactJS

Question

I'm trying to delete an item from a list of items that I get dynamically from a REST API. For some reason, my onDelete function is being called when I press the Search button, instead of individually when I want to delete a specific list item. Not sure why.

class Users extends Component {
  constructor(props) {
    super(props);
    this.state = {
      searchValue: '',
      users: []
    };
  }
  handleOnChange = event => {
    this.setState({ searchValue: event.target.value });
  };

  handleSearch = () => {
    this.makeApiCall(this.state.searchValue);
  };
  onDelete(e) {
    console.log('why is this being called?');
  }

  makeApiCall = async searchInput => {
    let res = await axios(
      `https://zuul-stage.whatifops.com/v1/user/phone/${searchInput}`
    );
    this.setState({ users: res.data });
  };

  render() {
    return (
      <div>
        <input
          name='text'
          type='text'
          placeholder='Search'
          onChange={event => this.handleOnChange(event)}
          value={this.state.searchValue}
        />
        <button onClick={this.handleSearch}>Search</button>{' '}
        {this.state.users ? (
          <div>
            {this.state.users.map((user, index) => (
              <div key={user.id}>
                <Row>
                  <Col lg={2} style={{ maxWidth: '9.7%' }}>
                    <Button
                      color='danger'
                      style={{ paddingTop: 12, paddingBottom: 12 }}
                      onClick={this.onDelete()}
                    >
                      <i className='fa fa-trash'></i>&nbsp; Delete
                    </Button>
                  </Col>
                  <Col lg={10}>
                    <ListGroup>
                      <ListGroupItem>
                        <strong>Email:</strong> {user.email} &nbsp; &nbsp;
                        <strong>Phone:</strong> {user.phone}
                      </ListGroupItem>
                    </ListGroup>
                  </Col>
                </Row>
              </div>
            ))}
          </div>
        ) : (
          <p>Try searching for a user</p>
        )}
      </div>
    );
  }
}

export default Users;

The onDelete function I was using was

onDelete(e){
let id = e.target.id;
let updatedUsers = this.users.filter(user=>user.id!=id)
this.setState({users:updatedUsers })
}

but I was getting an error about the users being undefined, and it was not being called individually onClick. Not sure what I am doing wrong, I thought this would be a simple thing to build but I'm struggling!

Answer 1

The issue is that the onDelete is being called (will get called automatically unless the following is changed)

change:

{this.onDelete()}

to:

{() => this.onDelete()}

or to (once onDelete is bounded correctly):

{this.onDelete}