Creé una tabla que contiene algunas reglas, agregué un botón para que el usuario pueda editar cualquier fila al hacer clic en el botón Editar. quiero cambiar la fila en la que se hizo clic solo, no todas las filas. También quiero desenfocar la fila requerida cuando el usuario haga clic en el botón Editar.
const[isEditing, setIsEditing] = useState(false) const onEditHandler = (event:any) =>{ const editedRuleId = (event.target.id); setIsEditing(!isEditing); } <div className='container'> {Object.entries(rules).map((rule) => ( <div key={rule[0]} className='tbl_rules'> <div className='box-1'><h6>{rule[0]}</h6></div> <div contentEditable={isEditing} className='box-2'>{rule[1]}</div> <div className='box-3'> <button id={rule[0]} type="button" className="btn btn-sm btn-info" onClick={onEditHandler} >{isEditing ? 'Save' : 'Edit'}</button> </div> </div> ))} </div>La mejor manera de hacer esto sería hacer que cada fila sea un componente único. Entonces terminarías con un código que se ve así:
<div className='container'> {Object.entries(rules).map((rule) => ( <Rule rule={rule}> ))} </div> Y en el componente Rule , agregaría el resto de su código de la siguiente manera, lo que permitirá que cada fila mantenga su propio estado:
const[isEditing, setIsEditing] = useState(false) const onEditHandler = (event:any) => { const editedRuleId = (event.target.id); setIsEditing(!isEditing); } return (<div key={rule[0]} className='tbl_rules'> <div className='box-1'><h6>{rule[0]}</h6></div> <div contentEditable={isEditing} className='box-2'>{rule[1]}</div> <div className='box-3'> <button id={rule[0]} type="button" className="btn btn-sm btn-info" onClick={onEditHandler} > {isEditing ? 'Save' : 'Edit'}</button> </div> </div>);const [ selectedCell, setSelectedCell ] = useState(null) ; <div className='container'> { Object.entries(rules).map( ([rule, id]) => return { <div key={id} className='tbl_rules'> { rule.map((item, index) => { <div className='box-1' contentEditable={selectedCell === id+"_"+index} onClick={() => setSelectedCell(id+"_"+index)} > {item} </div> }) } </div> } ) } </div> # for example rules { row_1 : ["rule_1_1", "rule_1_2"], row_2 : ["rule_2_1", "rule_2_2"] }