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](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/festive-wildflower-k0xog?file=/src/App.js:0-9313) Revisa mi **fork** en *CodeSandBox* y mira el código en ejecución.