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>
);
}