0

Mediante una función map estoy imprimiendo los documentos de una colección de mongodb en una tabla en un componente de react, pero necesito que en la 1er columna se muestre el número de fila. En el estado uso "count" iniciado desde 0 para después imprimirlo en la tabla pero se imprime solo en cero:

state = {
    info: [],
    count: 0
}
inrementar(){
    //this.setState({count: this.state.count + 1});
    this.setState(prevState => {
        return { count: prevState.count + 1};
      });
}
render() {
    return (
        <div>
            <table className="table table-striped text-center mt-3">
                <thead>
                    <tr>
                        <th scope="col">#</th>
                        <th scope="col">Word</th>
                        <th scope="col">Track</th>
                        <th scope="col">Meaning</th>
                        <th scope="col">Operations</th>
                    </tr>
                </thead>

                <tbody>
                    {this.state.info.map(inf => (

                        <tr key={inf._id}>
                            <th scope="row">{this.state.count}{this.incrementar}
                            </th>
                            <td>{inf.word}</td>
                            <td>{inf.track}</td>
                            <td>{inf.meaning}</td>
                            <td>
                                <div className="btn-group">
                                    <Link className="btn btn-info" to="/">Edit</Link>
                                    <Link className="btn btn-danger" to="/">Delete</Link>
                                </div>
                            </td>
                        </tr>

                    ))}
                </tbody>

            </table>
        </div>
    )
}
2
  • No conozco react, pero te puedo decir que la función map de javascript acepta un callback, y al definir ese callback lo puedes hacer con 3 parámetros, el primero ese el valor del elemento sobre el que estás iterando y el segundo el índice por el que estás iterando. Por lo que a lo mejor si cambias esto: this.state.info.map(inf => ( por this.state.info.map((inf, index) => ( tendrías en index el índice y ya podrías comprobar dentro si es la primera posición para hacer lo que necesites.
    – ordago
    el 20 nov. 2019 a las 10:36
  • 1
    Te amo amigo, ya era noche y nunca me paso por mi mente lo que me comentas, funciono el 21 nov. 2019 a las 0:50

1 respuesta 1

1

Como comenta órdago sería la forma más genérica de hacerlo, aunque el problema que tienes en tu código y para ayudarte a entender por qué no te funciona me explico:

<th scope="row">{this.state.count}{this.incrementar}

Aquí estás pasando una referencia a la función, pero no la estás ejecutando (te faltan los "()" ) aún así, si lo hicieras, seguramente no te mostraría nada o te arrojaría otro error.

Para usar el método que has creado tendrías que hacer lo siguiente:

{this.state.info.map(inf => {
  this.incrementar(); // Ejecucción en cada iteración.
  return (
    <tr key={inf._id}>
      <th scope="row">{this.state.count}

  ....
  )

pero aún así tiene un problema por que la actualización del estado es asíncrona y no te garantiza que obtengas lo que esperas.

Una forma simple y fácil en la que se podría hacer lo que propones es:

{this.state.info.map((inf, index) => (
    <tr key={inf._id}>
      <th scope="row">{index + 1} // el primer item sería el 0

  ....
  )

Espero que se entienda y te sirva, saludos.

2
  • 1
    Gracias por tu ayuda, ustedes son heroes sin capa, saludos el 21 nov. 2019 a las 0:52
  • @Jhonatan_Oropeza si te ha servido la ayuda que te ha proporcionado un usuario, le puedes recompensar aceptando la respuesta (pulsándo el botón ✓) y/o votándole positivo.
    – ordago
    el 21 nov. 2019 a las 13:12

Tu Respuesta

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

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