Puede intentar guardar la identificación del elemento presionado para mostrar o no el campo de texto en función de una matriz de estado.

 const [selected, setSelected] = React.useState([]); let posts = [ { id: 1, content: "Apple" }, { id: 2, content: "Grapes" }, { id: 3, content: "Orange" }, { id: 4, content: "Banana" } ]; const showTextField = (id) => { const index = selected.indexOf(id); if (index === -1) setSelected([...selected, id]); else { const splicedArray = selected.filter((item) => item !== id); setSelected(splicedArray); } }; return ( <div className="App"> {posts && posts.map((item) => ( <> <button onClick={() => showTextField(item.id)}> edit </button> <label> {item.content} </label> {selected.indexOf(item.id) !== -1 && <TextField />} </> ))} </div> ); }

Estoy usando la variable de estado (es decir, selectedId ) para almacenar la identificación de la publicación seleccionada. Si el ID selectedId es igual al ID de la publicación seleccionada, significa que se vuelve a hacer clic en el elemento, luego ocultarlo o mostrarlo.

Aquí está mi solución:

 import React, { useState } from 'react'; import axios from 'axios'; export default function GG() { let posts = [ { id: 1, content: 'Apple' }, { id: 2, content: 'Grapes' }, { id: 3, content: 'Orange' }, { id: 4, content: 'Banana' }, ]; const [selectedId,setSelectedId ] = useState(0); let showTextField = (postId) => { if (selectedId === postId) { setSelectedId(0); } else { setSelectedId(postId); } }; return ( <div> {posts.map((post) => ( <div key={post.id}> <button onClick={() => showTextField(post.id)}> edit </button> <label> {post.content}:</label> {(selectedId === post.id) && <TextField />} </div> ))} </div> ); }

Puede usar los componentes de reacción y el gancho de reacción useState para implementar esto. Este es un componente TextField.jsx y debe importarse en su App.jsx

 {import React, { useState } from "react"; function TextField(props){ const [show, setShow]= useState(false); function changer(){ setShow(!show); } return <form onSubmit={(e)=>e.preventDefault()}> <button onClick={changer}> edit </button> <label> {props.content} </label> {show && <textarea id={props.id} cols="30" rows="10"></textarea>} </form> } export default TextField;

Dentro de su App.js

 import "./styles.css"; import React from "react"; import TextField from "./TextField"; let posts = [{id:1, content:'Apple'}, {id:2, content:'Grapes'}, {id:3, content:'Orange'}, {id:4, content:'Banana'}]; function App() { return <div> {posts.map((i)=>{ return <div> <TextField content= {i.content} id={i.id}/> </div> })} </div>; } export default App;

Los componentes se utilizan principalmente para este tipo de cosas. Y estamos usando renderizado condicional usando && para renderizar un componente basado en una condición. Aquí verificamos si el "show" es verdadero o falso y, en función de su valor, representamos el área de texto.