0

Tengo la siguiente funcion en react:

const PartidaPresupuestariaList = ({
  partidapresupuestarias,
  onClickEdit,
  onClickDelete
}) => (
  <div className="x_panel">
    <h2>Lista de Fondos Financieros</h2>
    <div className="clearfix"></div>
    <div className="x_content">
      <div className="contenedor440">
        <table className="table__shassain" id="tabla_partidapresupuestaria">
          <thead>
            <tr>
              <td>
                Nombre
                <input
                  placeholder="Buscar"
                  onChange={(evt) =>
                    buscador(0, 'tabla_partidapresupuestaria', evt)
                  }
                  name="buscador"
                  type="text"
                  className="form-control"
                  style={{
                    height: '25px',
                    fontSize: '11px',
                    textAlign: 'center'
                  }}
                />
              </td>
              <td>Codigo</td>
              <td>Gestion</td>

              <td>Opc</td>
            </tr>
          </thead>
          <tbody>
            {partidapresupuestarias.map((partidapresupuestaria) => (
              <tr key={partidapresupuestaria.id}>
                <td>
                  {partidapresupuestaria.nombre}
                  {partidapresupuestarias.filter(
                    (p) => p.codigo == partidapresupuestaria.codigo
                  ).length != 1 ? (
                      <span
                        style={{
                          color: '#A70106',
                          fontSize: '9px',
                          textTransform: 'lowercase'
                        }}
                      >
                        {
                          partidapresupuestarias.filter(
                            (p) => p.codigo == partidapresupuestaria.codigo
                          ).length
                        }{' '}
                        repeticiones
                      </span>
                    ) : (
                      ''
                    )}
                </td>
                <td>{partidapresupuestaria.codigo}</td>
                <td>{partidapresupuestaria.tipo}</td>
                <td>
                  <a
                    href="#"
                    onClick={() => onClickEdit(partidapresupuestaria.id)}
                  >
                    <i className="fa fa-edit"></i> Editar
                  </a>
                  <br></br>
                  <a
                    href={`${URL_BASE}/partidapresupuestaria/${partidapresupuestaria.id}`}
                  >
                    <i className="fa fa-eye"></i> Mas Info
                  </a>
                  <br></br>
                  <a
                    href="#"
                    onClick={() => onClickDelete(partidapresupuestaria.id)}
                  >
                    <i className="fa fa-close"></i>Eliminar
                  </a>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  </div>
);

Todo funciona sin problema, pero la siguiente linea parece estar muy Ineficaz:

{partidapresupuestarias.filter(
  (p) => p.codigo == partidapresupuestaria.codigo
).length != 1 ? (
    <span
      style={{
        color: '#A70106',
        fontSize: '9px',
        textTransform: 'lowercase'
      }}
    >
      {
        partidapresupuestarias.filter(
          (p) => p.codigo == partidapresupuestaria.codigo
        ).length
      }
      repeticiones
    </span>
  ) : (
    ''
  )}

Lo que hago es buscar todos los códigos que son iguales entre si, y si son mas de uno mostrar un span con informacion de la cantidad que se repiten.

Dicha Linea ya esta dentro de un map, y no sé como hacer que partidapresupuestarias.filter(p=> p.codigo==partidapresupuestaria.codigo).length se asigne a una variable o algo asi para evitar hacerlo dos veces.

1 respuesta 1

1

Como primera cosa, tu arrow function deberías al menos cambiarla a multilínea (o separar la lógica del mapeo de <tr> en un nuevo componente, en realidad hay varias formas de refactorizar eso), ya que se va agregando más lógica al componente, que en un inline arrow function se ve bastante desordenado. En el fondo, es pasarla de esto:

const PartidaPresupuestariaList = () => (<div>asdf</div>);

a esto:

const PartidaPresupuestariaList = () => {
  return <div>asdf</div>;
};

Luego, deberías hacer una primera iteración para ver cuantas veces se repite el código:

  let counts = {};
  partidapresupuestarias.forEach(function(pp) {
    counts[pp.codigo] = (counts[pp.codigo] || 0) + 1;
  });

entonces accedes al valor registrado en counts cuando lo requieras:

{counts[partidapresupuestarias.codigo] != 1 && (
  <span
    style={{
      color: '#A70106',
      fontSize: '9px',
      textTransform: 'lowercase'
    }}
  >
    {counts[partidapresupuestarias.codigo]}
    repeticiones
  </span>
)}

Finalmente tu código quedaría algo como esto:

const PartidaPresupuestariaList = ({
  partidapresupuestarias,
  onClickEdit,
  onClickDelete
}) => {
  let counts = {};
  partidapresupuestarias.forEach(function(pp) {
    counts[pp.codigo] = (counts[pp.codigo] || 0) + 1;
  });

  return (
    <div className="x_panel">
      <h2>Lista de Fondos Financieros</h2>
      <div className="clearfix"></div>
      <div className="x_content">
        <div className="contenedor440">
          <table className="table__shassain" id="tabla_partidapresupuestaria">
            <thead>
              <tr>
                <td>
                  Nombre
                  <input
                    placeholder="Buscar"
                    onChange={(evt) =>
                      buscador(0, 'tabla_partidapresupuestaria', evt)
                    }
                    name="buscador"
                    type="text"
                    className="form-control"
                    style={{
                      height: '25px',
                      fontSize: '11px',
                      textAlign: 'center'
                    }}
                  />
                </td>
                <td>Codigo</td>
                <td>Gestion</td>

                <td>Opc</td>
              </tr>
            </thead>
            <tbody>
              {partidapresupuestarias.map((partidapresupuestaria) => (
                <tr key={partidapresupuestaria.id}>
                  <td>
                    {partidapresupuestaria.nombre}
                    {counts[partidapresupuestarias.codigo] != 1 && (
                      <span
                        style={{
                          color: '#A70106',
                          fontSize: '9px',
                          textTransform: 'lowercase'
                        }}
                      >
                        {counts[partidapresupuestarias.codigo]}
                        repeticiones
                      </span>
                    )}
                  </td>
                  <td>{partidapresupuestaria.codigo}</td>
                  <td>{partidapresupuestaria.tipo}</td>
                  <td>
                    <a
                      href="#"
                      onClick={() => onClickEdit(partidapresupuestaria.id)}
                    >
                      <i className="fa fa-edit"></i> Editar
                    </a>
                    <br></br>
                    <a
                      href={`${URL_BASE}/partidapresupuestaria/${partidapresupuestaria.id}`}
                    >
                      <i className="fa fa-eye"></i> Mas Info
                    </a>
                    <br></br>
                    <a
                      href="#"
                      onClick={() => onClickDelete(partidapresupuestaria.id)}
                    >
                      <i className="fa fa-close"></i>Eliminar
                    </a>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
};

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.