1

Tengo una tabla HTML y al dar click en el botón editar se debe poner en modo edición solo la fila seleccionada, mi problema es que todas las filas se ponen como editables.

Aquí dejo mi código:

import "./styles.css";
import React, { useEffect, useState } from "react";
import axios from "axios";

export default function App() {
  const tabledata = [
    {
      campo: "EL SALITRE",
      cod_Campo: 1,
      codigo: "01255",
      comentarios: "La deuda se pagara alrededor de 4 años.",
      estatus: "C",
      id: 75,
      nombre: "JOSE LUIS",
      saldoFinal: "44,306.00"
    },
    {
      campo: "EL SALTO",
      cod_Campo: 1,
      codigo: "01067",
      comentarios: "Pendiente",
      estatus: "R",
      id: 76,
      nombre: "MANUEL",
      saldoFinal: "71,314.00"
    },
    {
      campo: "EL CEREZO",
      cod_Campo: 1,
      codigo: "00696",
      comentarios: "En espera",
      estatus: "E",
      id: 77,
      nombre: "RODOLFO",
      saldoFinal: "85,932.00"
    }
  ];

  const [modoEdicion, setmodoEdicion] = useState(false);
  const [verEliminar, setverEliminar] = useState(false);
  const [id, setId] = useState("");

  const [filaSeleccionada, setfilaSeleccionada] = useState({
    estatus: "",
    comentarios: "",
    idAgen: 260
  });

  const handleChange = (e) => {
    const { name, value } = e.target;
    setfilaSeleccionada((prevState) => ({
      ...prevState,
      [name]: value
    }));
    console.log(filaSeleccionada);
  };

  const eliminar = (id) => {
    console.log(id);
  };

  const editar = (id) => {
    setmodoEdicion(true);
    setId(id);
    console.log(id);
  };

  const cancelar = () => {
    setmodoEdicion(false);
  };

  return (
    <div className="App">
      <div>
        <section className="content">
          <div className="table-responsive table-condensed table-sm tabla">
            <table
              className="table table-hover"
              id="dataTableData"
              name="dataTableData"
              style={{ fontSize: 11, textAlign: "center" }}
            >
              <thead className="thead-light">
                <tr>
                  <th style={{ display: "none" }}>Id</th>
                  <th>Codigo</th>
                  <th>Nombre</th>
                  <th>Campo</th>
                  <th>Estatus</th>
                  <th>Comentarios</th>
                  <th>Saldo Final</th>
                  <th></th>
                </tr>
              </thead>
              <tbody style={{ backgroundColor: "white" }}>
                {tabledata.length === 0 ? (
                  <tr>
                    <td colSpan={11}>No hay datos</td>
                  </tr>
                ) : (
                  tabledata.map((item) => (
                    <tr key={item.id}>
                      <td style={{ display: "none" }}>{item.id}</td>
                      <td>{item.codigo}</td>
                      <td>{item.nombre}</td>
                      <td>
                        {item.cod_Campo} - {item.campo}
                      </td>
                      {modoEdicion ? (
                        <React.Fragment>
                          <td>
                            <select
                              className="form-control"
                              id="estatus"
                              name="estatus"
                              onChange={handleChange}
                            >
                              <option value={0}>
                                {" "}
                                --Seleccione una opción--{" "}
                              </option>
                              <option value={"A"}>
                                ATENCIÓN A PRODUCTORES
                              </option>
                              <option value={"M"}>CIERRE DE MATERIAL</option>
                              <option value={"C"}>COBRANZA</option>
                              <option value={"R"}>PENDIENTE REVISIÓN</option>
                              <option value={"G"}>REVISA GERENCIA</option>
                              <option value={"S"}>SALDADO</option>
                              <option value={"T"}>TERMINO TEMPORADA</option>
                              <option value={"E"}>VA A ENTREGAR</option>
                              <option value={"P"}>VA A PAGAR</option>
                            </select>
                          </td>
                          <td>
                            <input
                              type="text"
                              style={{ fontSize: 11 }}
                              className="mb-2"
                              name="comentarios"
                              value={item.comentarios}
                              onChange={handleChange}
                            />
                          </td>
                        </React.Fragment>
                      ) : (
                        <React.Fragment>
                          <td>
                            {item.estatus === "A" ? (
                              <p> ATENCIÓN A PRODUCTORES </p>
                            ) : (
                              false
                            )}
                            {item.estatus === "M" ? (
                              <p> CIERRE DE MATERIAL </p>
                            ) : (
                              false
                            )}
                            {item.estatus === "C" ? <p> COBRANZA </p> : false}
                            {item.estatus === "R" ? (
                              <p> PENDIENTE REVISIÓN </p>
                            ) : (
                              false
                            )}
                            {item.estatus === "G" ? (
                              <p> REVISA GERENCIA </p>
                            ) : (
                              false
                            )}
                            {item.estatus === "S" ? <p> SALDADO </p> : false}
                            {item.estatus === "T" ? (
                              <p> TERMINO TEMPORADA </p>
                            ) : (
                              false
                            )}
                            {item.estatus === "E" ? (
                              <p> VA A ENTREGAR </p>
                            ) : (
                              false
                            )}
                            {item.estatus === "P" ? <p> VA A PAGAR </p> : false}
                          </td>
                          <td>{item.comentarios}</td>
                        </React.Fragment>
                      )}
                      <td>{item.saldoFinal}</td>
                      {modoEdicion ? (
                        <React.Fragment>
                          <td>
                            <button
                              className="btn btn-primary btn-sm float-right mx-2"
                              type="submit"
                            >
                              guardar
                            </button>
                          </td>
                          <td>
                            <button
                              className="btn btn-secondary btn-sm float-right mx-2"
                              type="submit"
                              onClick={() => cancelar()}
                            >
                              cancelar
                            </button>
                          </td>
                        </React.Fragment>
                      ) : (
                        <React.Fragment>
                          <td>
                            <button
                              className="btn btn-warning btn-sm float-right"
                              type="submit"
                              onClick={() => editar(item.id)}
                            >
                              editar
                            </button>
                          </td>
                          {verEliminar ? (
                            <React.Fragment>
                              <td>
                                <button
                                  className="btn btn-danger btn-sm float-right mx-2"
                                  type="submit"
                                  onClick={() => eliminar(item.id)}
                                >
                                  borrar
                                </button>
                              </td>
                            </React.Fragment>
                          ) : (
                            <React.Fragment>
                              <td></td>
                            </React.Fragment>
                          )}
                        </React.Fragment>
                      )}
                    </tr>
                  ))
                )}
              </tbody>
            </table>
          </div>
        </section>
      </div>
    </div>
  );
}

Edit new

1
  • 1
    Tu pregunta fue editada debido a que no pusiste el código en la pregunta, y agregaron dicho código allí. Te recomiendo evitar poner links que contengan tu código, ya que si dicho link se cae, la pregunta quedará inservible para aquellos que la vean en el futuro.
    – Dante S.
    Commented el 5 jun. 2021 a las 20:27

1 respuesta 1

0

Te falta hacer una validación más para entrar en "modoEdicion".

Cuando estás haciendo el .map, modifica la condición para que quede así: id === item.id && modoEdicion ?.

De esa forma, con el id === item.id te aseguras de que solo afecte a la fila deseada y no a todos.

El && es el típico operador de JS que valida que ambas condiciones sean true.

En este caso, se debe validar que tanto el id del la fila cliqueada sea el mismo que se está imprimiendo y además que el estado modoEdicion sea true.

Haciendo esas modificaciones, todo el código quedará así:

import "./styles.css";
import React, { useEffect, useState } from "react";
import axios from "axios";

export default function App() {
  const tabledata = [
    {
      campo: "EL SALITRE",
      cod_Campo: 1,
      codigo: "01255",
      comentarios: "La deuda se pagara alrededor de 4 años.",
      estatus: "C",
      id: 75,
      nombre: "JOSE LUIS",
      saldoFinal: "44,306.00"
    },
    {
      campo: "EL SALTO",
      cod_Campo: 1,
      codigo: "01067",
      comentarios: "Pendiente",
      estatus: "R",
      id: 76,
      nombre: "MANUEL",
      saldoFinal: "71,314.00"
    },
    {
      campo: "EL CEREZO",
      cod_Campo: 1,
      codigo: "00696",
      comentarios: "En espera",
      estatus: "E",
      id: 77,
      nombre: "RODOLFO",
      saldoFinal: "85,932.00"
    }
  ];

  const [modoEdicion, setmodoEdicion] = useState(false);
  const [verEliminar, setverEliminar] = useState(false);
  const [id, setId] = useState("");

  const [filaSeleccionada, setfilaSeleccionada] = useState({
    estatus: "",
    comentarios: "",
    idAgen: 260
  });

  const handleChange = (e) => {
    const { name, value } = e.target;
    setfilaSeleccionada((prevState) => ({
      ...prevState,
      [name]: value
    }));
    console.log(filaSeleccionada);
  };

  const eliminar = (id) => {
    console.log(id);
  };

  const editar = (id) => {
    setmodoEdicion(true);
    setId(id);
    console.log(id);
  };

  const cancelar = () => {
    setmodoEdicion(false);
  };

  return (
    <div className="App">
      <div>
        <section className="content">
          <div className="table-responsive table-condensed table-sm tabla">
            <table
              className="table table-hover"
              id="dataTableData"
              name="dataTableData"
              style={{ fontSize: 11, textAlign: "center" }}
            >
              <thead className="thead-light">
                <tr>
                  <th style={{ display: "none" }}>Id</th>
                  <th>Codigo</th>
                  <th>Nombre</th>
                  <th>Campo</th>
                  <th>Estatus</th>
                  <th>Comentarios</th>
                  <th>Saldo Final</th>
                  <th></th>
                </tr>
              </thead>
              <tbody style={{ backgroundColor: "white" }}>
                {tabledata.length === 0 ? (
                  <tr>
                    <td colSpan={11}>No hay datos</td>
                  </tr>
                ) : (
                  tabledata.map((item) => (
                    <tr key={item.id}>
                      <td style={{ display: "none" }}>{item.id}</td>
                      <td>{item.codigo}</td>
                      <td>{item.nombre}</td>
                      <td>
                        {item.cod_Campo} - {item.campo}
                      </td>
                      {id === item.id && modoEdicion ? (
                        <React.Fragment>
                          <td>
                            <select
                              className="form-control"
                              id="estatus"
                              name="estatus"
                              onChange={handleChange}
                            >
                              <option value={0}>
                                {" "}
                                --Seleccione una opción--{" "}
                              </option>
                              <option value={"A"}>
                                ATENCIÓN A PRODUCTORES
                              </option>
                              <option value={"M"}>CIERRE DE MATERIAL</option>
                              <option value={"C"}>COBRANZA</option>
                              <option value={"R"}>PENDIENTE REVISIÓN</option>
                              <option value={"G"}>REVISA GERENCIA</option>
                              <option value={"S"}>SALDADO</option>
                              <option value={"T"}>TERMINO TEMPORADA</option>
                              <option value={"E"}>VA A ENTREGAR</option>
                              <option value={"P"}>VA A PAGAR</option>
                            </select>
                          </td>
                          <td>
                            <input
                              type="text"
                              style={{ fontSize: 11 }}
                              className="mb-2"
                              name="comentarios"
                              value={item.comentarios}
                              onChange={handleChange}
                            />
                          </td>
                        </React.Fragment>
                      ) : (
                        <React.Fragment>
                          <td>
                            {item.estatus === "A" ? (
                              <p> ATENCIÓN A PRODUCTORES </p>
                            ) : (
                              false
                            )}
                            {item.estatus === "M" ? (
                              <p> CIERRE DE MATERIAL </p>
                            ) : (
                              false
                            )}
                            {item.estatus === "C" ? <p> COBRANZA </p> : false}
                            {item.estatus === "R" ? (
                              <p> PENDIENTE REVISIÓN </p>
                            ) : (
                              false
                            )}
                            {item.estatus === "G" ? (
                              <p> REVISA GERENCIA </p>
                            ) : (
                              false
                            )}
                            {item.estatus === "S" ? <p> SALDADO </p> : false}
                            {item.estatus === "T" ? (
                              <p> TERMINO TEMPORADA </p>
                            ) : (
                              false
                            )}
                            {item.estatus === "E" ? (
                              <p> VA A ENTREGAR </p>
                            ) : (
                              false
                            )}
                            {item.estatus === "P" ? <p> VA A PAGAR </p> : false}
                          </td>
                          <td>{item.comentarios}</td>
                        </React.Fragment>
                      )}
                      <td>{item.saldoFinal}</td>
                      {id === item.id && modoEdicion ? (
                        <React.Fragment>
                          <td>
                            <button
                              className="btn btn-primary btn-sm float-right mx-2"
                              type="submit"
                            >
                              guardar
                            </button>
                          </td>
                          <td>
                            <button
                              className="btn btn-secondary btn-sm float-right mx-2"
                              type="submit"
                              onClick={() => cancelar()}
                            >
                              cancelar
                            </button>
                          </td>
                        </React.Fragment>
                      ) : (
                        <React.Fragment>
                          <td>
                            <button
                              className="btn btn-warning btn-sm float-right"
                              type="submit"
                              onClick={() => editar(item.id)}
                            >
                              editar
                            </button>
                          </td>
                          {verEliminar ? (
                            <React.Fragment>
                              <td>
                                <button
                                  className="btn btn-danger btn-sm float-right mx-2"
                                  type="submit"
                                  onClick={() => eliminar(item.id)}
                                >
                                  borrar
                                </button>
                              </td>
                            </React.Fragment>
                          ) : (
                            <React.Fragment>
                              <td></td>
                            </React.Fragment>
                          )}
                        </React.Fragment>
                      )}
                    </tr>
                  ))
                )}
              </tbody>
            </table>
          </div>
        </section>
      </div>
    </div>
  );
}

Edit new

Revisa mi fork en CodeSandBox y mira el código en ejecución.

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.