1

So in react I made a button to delete some data so I need to get teh car by id and remove it by using react js axios so the response I got is an empty array so can some one help me please.

Here is the code :

in service data file :

get(id) {

  return http.get(`/get/${id}`);
}
delete(id) {

  return http.delete(`/delete/${id}`);
}

Component.jsx

 this.state = {
        idCars: null,
        carName: "",
        carModel: "", 
        cars: [],
        submitted: false
      };

     
    }
    getCar(idCars) {
      DataService.get(idCars)
        .then(response => {
          this.setState({
            cars: response.data
            
          });
          console.log(response.data);
          
        })
        .catch(e => {
          console.log(e);
        });
    }
   

    componentDidMount() {
      
      this.getCar(this.props.match.params.idCars);
      this.retrieveCars()
    }
 deleteC() {    
     

      DataService.delete(this.state.cars.idCars)
        .then(response => {
          
          this.props.history.push('/Classement');
          this.refreshList()
        })
        .catch(e => {
          console.log(e);
        });
    }
 render() {
      const { cars } = this.state;
           return (      
            <div ><tbody>
                    {
                      cars.map(data => (
                        <tr >
                        
                        <th scope="row">{data.idCars}</th>  
                      
                      <td>{data.carName}</td>
                      <td>{data.carModel}</td>
                      <td>
                 
                      <button  className="btn btn-danger"  onClick={this.deleteC}>
                        Remove
                      </button>
                        </td> 
            
                      </tr>
                      ))
                    }

And doesn't remove nothing, how can I fix this guys

enter image description here

Dominik
  • 6,078
  • 8
  • 37
  • 61

1 Answers1

2

At the moment your DeleteC function tries to read:

this.state.cars.idCars

But this.state.cars is an array so idCars is only defined for a given index such as in:

this.state.cars[0].idCars

What you could do is modify your onClick behavior for this:

onClick={() => deleteC(data.idCars)}

This way the deleteC function will be called with the idCars of the selected row.

Lamy
  • 81
  • 3
  • 1
    I tried to pass id on click but it returns id as an undefined here is the error I get in the console : vendors~main.chunk.js:91980 DELETE http://localhost:3000/api/delete/undefined net::ERR_INSUFFICIENT_RESOURCES And the error loops –  Aug 26 '21 at 10:12
  • 1
    That's working now... thank you sooo much –  Aug 26 '21 at 10:42