I seem to be passing everything over correctly.
what I need to happen
remove the item from the array that matches the var itemIndex
parent comp
const Pagethree = () => {
const[items,setItem] = useState([]);
return(
<ul>
{
items.map((items, i) =>
<ListItem index={i} item={items} setItem={setItem}/>)
}
</ul>
)
child comp
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;
Your parent component should be managing the state. All you should be passing down to the child component from the parent is the data that it needs to render, and a handler for the delete button.
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>