Skip to main content
1 de 2

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 tipico 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 también 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.