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>
);
}
Revisa mi fork en CodeSandBox y mira el código en ejecución.