Develop Reference

filtering out an array of items setting state

I am looking to filter through an array and return all elements of the array except the element which has been clicked on, so I have a map of list elements each with a key={index} of their map, onClick it should call my remove function, and pass in the index of the element to be removed, I then need to filter over that array, remove the element, update state, and send this information to my backend.
here is the delete function
const deleteItem = (id) => {
// use filter, to loop through all pieces of index
const element = list.todoItems.indexOf(id - 1);
setList({ todoItems: list.todoItems.filter(element !== id) });
console.log(list.todoItems);
dispatch(updateTodo(list));
};
here is the mapped array
{list.todoItems.map((Item, index) => (
<div
// setup anonymous function, that will call
// ONLY when the div
// is clicked on.
key={index}
onClick={() => deleteItem(index)}
>
{/* list item, gets text from props */}
<li>{Item}</li>
</div>
))}
I must be missing something, because this should work, Though i may have to shift gears and have each item as an actual object in my database, though id rather not do this as i feel an array of strings is more than appropriate for this app.

Remove your indexOf logic and this will work.
You don't have to find the index of the array because you're already receiving it as a parameter.
const deleteItem = (id) => {
setList({ todoItems: list.todoItems.filter((_, filterID) => filterID !== id) });
console.log(list.todoItems);
dispatch(updateTodo(list));
};

You don't need to subtract one from the index on the indexOf function
And for this case, splice works better than filter
const deleteItem = (id) => {
const element = list.todoItems.indexOf(id);
setList({ todoItems: {...list}.todoItems.splice(element, 1)});
dispatch(updateTodo(list));
};

How to get first element of array inside an object

I have an object that looks like this
const array_eps = {
episode3: ["https:\/\/www.youtube.com\/embed\/kzZ6KXDM1RI","https:\/\/www.youtube.com\/embed\/T8y_RsF4TSw","https:\/\/www.youtube.com\/embed\/qrtKLNTB71c","https:\/\/www.youtube.com\/embed\/qrtKLNTB71c","https:\/\/www.youtube.com\/embed\/qrtKLNTB71c","https:\/\/www.youtube.com\/embed\/qrtKLNTB71c"],
episode2: ["https:\/\/www.youtube.com\/embed\/qrtKLNTB71c"],
episode1: ["https:\/\/www.youtube.com\/embed\/qrtKLNTB71c"],
};
What i want to do here is get the first element of array that act as value in a object.
I'm already do something like this
array_eps[Object.keys(array_eps)[0]]
But it's return the whole array not only the first element.
Thankyou

const array_eps = {
episode3: ["https:\/\/www.youtube.com\/embed\/kzZ6KXDM1RI","https:\/\/www.youtube.com\/embed\/T8y_RsF4TSw","https:\/\/www.youtube.com\/embed\/qrtKLNTB71c","https:\/\/www.youtube.com\/embed\/qrtKLNTB71c","https:\/\/www.youtube.com\/embed\/qrtKLNTB71c","https:\/\/www.youtube.com\/embed\/qrtKLNTB71c"],
episode2: ["https:\/\/www.youtube.com\/embed\/qrtKLNTB71c"],
episode1: ["https:\/\/www.youtube.com\/embed\/qrtKLNTB71c"],
};
console.log(array_eps[Object.keys(array_eps)[0]][0]);

UseState how to set an Array back to empty?

I'm trying set clickFavIconArray back to an empty array with the hook.
Basically, the setClickFavIconArray has a list of IDs the showFavIcon() checks that ID and if it contains the same ID I want to remove it from the array and update the setClickFavIconArray to the new Array.
However, it just seems to be adding on to the original clickFavIconArray no matter what. Is there a way to clear the clickFavIconArray state back to an [] empty array?
Some help here would be awesome.
const [clickFavIconArray, setClickFavIconArray] = useState([]);
function showFavIcon(id){
if (clickFavIconArray.includes(id)) {
const newArray = clickFavIconArray.filter(item => !id.includes(item))
setClickFavIconArray(newArray)
}
setClickFavIconArray([...clickFavIconArray, id])
}

Simply pass the new value of empty array to setClickFavIconArray():
setClickFavIconArray([])

To make sure that the id is not immediately added to the array again, add a return statement inside the if-statement.
const [clickFavIconArray, setClickFavIconArray] = useState([]);
function showFavIcon(id){
if (clickFavIconArray.includes(id)) {
const newArray = clickFavIconArray.filter(item => !id.includes(item));
setClickFavIconArray(newArray);
return; // make sure that the next line is not executed
}
setClickFavIconArray([...clickFavIconArray, id])
}

There are two issues with the code
filter function seems to be invalid it should be replaced with
clickFavIconArray.filter(item => id != item)
You are adding id again to the array with this
setClickFavIconArray([...clickFavIconArray, id])
If you want to remove id, there is no need for this line in your code.
However you can always set clickFavIconArray to an empty array state using this code:
setClickFavIconArray([])

How would I go about deleting a single item in Firebase?

How would I go about deleting just a single item?
Provided I know the 'name' value ("To add") but I don't know the item ID value (-M0qUq...).
The following code works to delete the item, but I want to make it dynamic and not have to hardcode in the ID value.
handleRemove = (item) => {
db.ref('/items/-M0qUPNnHRbZAb1R3690/').remove();
}

Try the following:
let query = db.ref('items').orderByChild("name").equalTo("To add");
db.once('value').then((snapshot) => {
snapshot.forEach((subSnapshot) => {
let key = subSnapshot.key;
db.ref('items').child(key).remove();
});
});
First add a query equalTo, then iterate inside the returned result to be able to retrieve the key and then use remove() to delete.

The value of one input is affecting another

I have a simple app which allows someone to add a numbers into an input, and have those numbers render onto the page (as inputs) which can be edited.
addSiblingValue(evt) {
this.setState({
currentObject: {
...this.state.currentObject,
numberOfSiblings: evt.target.value
}
});
add() {
const array = [...this.state.array, this.state.currentObject];
this.setState({
array
});
}
siblingCountChange(rowIndex, event) {
const array = [...this.state.array];
array[rowIndex].numberOfSiblings = event.target.value;
this.setState({ array });
}
So when I add a number it renders a new input with the value set to the number I've just added, but when I go to change that value, it now is affecting the first input.
The first row of inputs are using their own object currentObject which pushes to to the this.state.array, so I'm not sure why editing anything in that array would affect the currentObject?
Expected behaviour:
User enters a number into the input and clicks add
That input is rendered and can be edited independently
How do I achieve this or what is it I'm doing wrong here?
CodeSandbox
Thank you

When you add this.state.currentObject to the array, it works as an reference, so that the added object in the array and this.state.currentObject are the same object. You can prevent that by adding not the object itself, but a copy of the object into the array:
add() {
const array = [...this.state.array, {"numberOfSiblings": this.state.currentObject.numberOfSiblings}];
this.setState({
array
});
}

siblingCountChange(rowIndex, event) {
const array = [...this.state.array];
array[rowIndex].numberOfSiblings += parseInt(event.target.value);
this.setState({ array });
}
You were not adding the actual number to the current state. I also removed the value from the add like so:
<input
type="text"
onChange={this.siblingCountChange.bind(this, rowIndex)}
/>
You will need to put error handling on the state as a string plus a number leads to NaN error. As you can see the number is parsed before addition.

Thanks to dieckie for pointing me in the right direction. Unfortunately that particular solution did not work, but using Object.assign to create a reference and pushing that to the array did?
Posting here so it helps others/myself in future:
add() {
let copyOfCurrentObject = Object.assign({}, this.state.currentObject);
const array = [...this.state.array, copyOfCurrentObject];
this.setState({
array
})
}
This question was also helpful.