Parece que estoy pasando todo correctamente.
lo que necesito que suceda
elimine el elemento de la matriz que coincida con el var itemIndex
composición principal
const Pagethree = () => { const[items,setItem] = useState([]); return( <ul> { items.map((items, i) => <ListItem index={i} item={items} setItem={setItem}/>) } </ul> )compensación infantil
import React, {useState} from "react"; const ListItem = (props) =>{ const {item, setItem, index} = props; const removeItem = e =>{ var array = [...item]; var indexItem = index; if (indexItem !== -1){ array.splice(indexItem, 1); setItem(array); } console.log(array); } return( <div> <ul> { <div class="flex"> {item} <button onClick={removeItem}>delete</button> </div> } </ul> </div> ) }; export default ListItem;Su componente principal debe administrar el estado. Todo lo que debe pasar al componente secundario desde el componente principal son los datos que necesita representar y un controlador para el botón Eliminar.
const { useState } = React; // Passing a value, and index, and the handler function ListItem({ value, index, updateState }) { // When `handleDelete` is called, call // the `updateState` with the item index // as an argument function handleDelete() { updateState(index); } // The button calls the local function when // it is clicked return ( <li> {value} <button onClick={handleDelete}>Delete</button> </li> ); } function Example({ data }) { const [ items, setItems ] = useState(data); // `filter` out the items that don't have // the deleted item's index, and update state function updateState(index) { const updated = items.filter((_, i) => i !== index); setItems(updated); } // `map` over the data making sure // that `updateState` is passed down in the props return ( <ul> {items.map((el, i) => { return ( <ListItem key={i} value={el} index={i} updateState={updateState} /> ) })} </ul> ); }; const data = [1, 2, 3, 4 ]; ReactDOM.render( <Example data={data} />, document.getElementById('react') ); ul { list-style-type: none; padding: 0; margin: 0; } li { margin-bottom: 1em; } <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script> <div id="react"></div>