2

Me gustaria saber como hacer para hacer funcional digamos este boton, yo cree una tabla con un repetidor que me muestra todas las categorias que devuelve la api en json, pero en cada tengo la opcion eliminar, para eliminar esa categoria, como puedo hacer en react que por ej con algun onClick o algo asi llamar a una funcion y enviarle el nombre de esa categoria y luego que la funcion haga un fetch a mi API?

{this.state.items.length ?
        this.state.items.map(item=>

  <tr>
    <td>{item.name}</td>
    <td><a href="#"><b>Edit</b></a> | <a className="red" href="#">Delete</a></td>
  </tr>

1 respuesta 1

1

Puedes pasarle directamente al método encargado de eliminar la categoría el id de la misma:

<button onClick={() => this.removeCategory(categoria.id)}>Eliminar</button>

También puedes hacerlo así:

<button onClick={this.removeCategory.bind(this, categoria.id)}>Eliminar</button>

Y cuando se haga click en el boton, se pasa la propiedad id de la categoría al método y aquí se envía a la API para su eliminación:

removeCategory (id) {
  fetch (`http://localhost:3000/api/categorias/${id}`, {
    method: 'DELETE'
  })
  .then(res => res.json())
  .then(res => {
    if (res.success) {
      let categories = this.state.categories.filter(c => c.id !== id);
      this.setState({ categories });
      alert('Categoría eliminada');
    }
  });
}

Luego de eliminar la categoría de la base de datos, nos queda eliminarla de la tabla. Para ésto puedes filtrar las categorías que tienes en el state de tal modo que solo obtengas las categorías cuyo id es diferente al id de la categoría eliminada:

let categories = this.state.categories.filter(c => c.id !== id);
this.setState({ categories });

Lo que pasará es que se re-renderizará la tabla y ya no aparecerá el registro eliminado.

10
  • Muchas gracias funciona perfecto, pero lo que no logre hacer andar es la parte que re-renderiza la tabla, la categoria no tiene id es por el nombre y el unico dato que tengo es item.nombre, no se si sera que no lo adapte bien a mi codigo pero bueno, me podrias decir como seria para hacerlo en mi caso eso? el 14 ene. 2017 a las 22:46
  • ¿Hablas de la otra pregunta? En un momento actualizo mi respuesta.
    – gugadev
    el 14 ene. 2017 a las 22:48
  • No no, digo lo ultimo que es lo de actualizar la tabla para borrar la categoria que borre el 14 ene. 2017 a las 22:49
  • Tu usas algo de categories pero en mi caso no es categories, para obtener el nombre de la categoria uso item.name, y ademas tu lo haces con la id y yo solo con el nombre, pude hacer funcionar lo primero pero la parte que esta adentro del if para actualizar la tabla no. el 14 ene. 2017 a las 22:50
  • En mi ejemplo, categories viene a ser el array de datos, que puede ser cualquier nombre, como items. Éste array de datos, el mismo que iteras para mostrar filas en la tabla, puedes filtrarlo para obtener los items que no tienen un campo en común con el eliminado. Por ejemplo, dices que en tu caso es por nombre, entonces solo podrías hacer: let items = this.state.items.filter(item => item.name !== name); y procedes a acualizar el estado con el nuevo array filtrado. Así mismo, en lugar de this.removeCategory.bind(this, categoria.id) pasarías categoria.name.
    – gugadev
    el 14 ene. 2017 a las 22:54

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.