Quiero cambiar el campo Text a input al hacer clic en el botón Editar. El texto está dentro de la función de map , el código que he trabajado se menciona a continuación
function test() { const [img, setImg] = useState(false) let data = { { id: 1, name: 'test 1' }, { id: 2, name: 'test 2' } } return ( <> {data.map(e => { return ( {img ? ( <input placeholder={e.name} /> ) : ( <div> <p>{e.name}</p> <button onClick={() => setImg(true)}>edit</button> </div> )} ) })} </> ) En este código, si hago clic en el botón Editar, en realidad muestra la entrada en todos los nombres, en lugar de hacer clic. quiero editar solo un nombre, por ejemplo, si quiero editar el nombre test 1 , no quiero que la entrada se muestre en la test 2
Algo como esto funcionaría -
function test() { const [img, setImg] = useState(-1) let data = { { id: 1, name: 'test 1' }, { id: 2, name: 'test 2' } } return ( <> {data.map((e, idx) => { return ( {img==idx ? ( <input placeholder={e.name} style={{display: idEdit == e.id ? 'block' : 'none'}}/> //<== Conditionaly to appear or not ) : ( <div> <p>{e.name}</p> <button onClick={() => { setImg(idx) } }>edit</button> </div> )} ) })} </> )Puede establecer un estado cuando hace clic en el botón Editar, luego use este estado para mostrar condicionalmente la entrada que desea:
function test() { const [img, setImg] = useState(false) const [idEdit, setIdEdit] = useState(null); //<== Create this state let data = { { id: 1, name: 'test 1' }, { id: 2, name: 'test 2' } } return ( <> {data.map(e => { return ( {img ? ( <input placeholder={e.name} style={{display: idEdit == e.id ? 'block' : 'none'}}/> //<== Conditionaly to appear or not ) : ( <div> <p>{e.name}</p> <button onClick={() => { setImg(true) setIdEdit(e.id) //<== set idEdit state here } }>edit</button> </div> )} ) })} </> )