desde ya muchas gracias, no obstante antes de contestar la pregunta lea atentamente lo que le pido ayuda con todo respeto. Lo que necesito:
Necesito que cuando se haga clic en el botón Eliminar, el componente no solo se elimine, sino que también deje otro botón, al hacer clic en el cual, el componente remoto se vuelve a representar
Funcionalidad que ya funciona: renderizar un componente al hacer clic, así como eliminarlo con un botón
import React, {useState} from 'react'; import ReactDOM from 'react-dom'; interface IParams { id: number; } interface IBlock { deleteBlock(blockToDelete: number) : void id: number } function App() { const [newBlock, setNewBlock] = useState([] as IParams[]) const createOnClick = () => { const newId = { id: newBlock.length + 1 } setNewBlock([...newBlock, newId]) } const deleteBlock = (blockToDelete: number) => { setNewBlock( newBlock.filter((x) => { return x.id !== blockToDelete }) ) } const FunctionalBlock: React.FC<IBlock> = ({id, deleteBlock}) => { return ( <div style={{display: 'flex', maxWidth: '300px', justifyContent: 'space-between'}}> <div>i was created {id} times</div> <button onClick={() => { deleteBlock(id) }}>now delete me</button> </div> ) } return ( <div className="App"> <button onClick={createOnClick}> New block </button> { newBlock.map((x) => ( <FunctionalBlock id={x.id} key={x.id} deleteBlock={deleteBlock}/> )) } </div> ); } ReactDOM.render( <React.StrictMode> <App /> </React.StrictMode>, document.getElementById('root') );¿Por qué no simplemente establecer un estado en el bloque?
const {useState} = React const FunctionalBlock = ({ id, idx, isDeleted, toggleBlockState }) => { return ( <div style={{ display: "flex", maxWidth: "300px", justifyContent: "space-between" }} > { !isDeleted ? <React.Fragment> <div>i was created {idx} times</div> <button onClick={toggleBlockState} > now delete me </button> </React.Fragment> : <button onClick={toggleBlockState}>REVIVE BLOCK</button> } </div> ) ; }; const getNewBlock = (idx) => ({ id: Date.now(), idx, isDeleted: false, }) const toggleIsDeletedById = (id, block) => { if (id !== block.id) return block return { ...block, isDeleted: !block.isDeleted } } const App = () => { const [newBlock, setNewBlock] = useState([]) const createOnClick = () => { const block = getNewBlock(newBlock.length + 1) setNewBlock([...newBlock, block]) } const toggleBlockStateById = (id) => { setNewBlock(newBlock.map((block) => toggleIsDeletedById(id, block))) } return ( <div> <div>NEW BLOCK</div> <div><button onClick={createOnClick}>ADD NEW BLOCK +</button></div> <div> { newBlock.map(block => <FunctionalBlock {...block} toggleBlockState={() => toggleBlockStateById(block.id)}/>) } </div> </div> ); }; ReactDOM.render( <React.StrictMode> <App /> </React.StrictMode>, document.getElementById("root") ); <script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script> <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script> <div id="root"></div>