We Keep Coding

ReactJS - How to remove an item from an array in a functional component?

I am trying to create a simple shopping cart using ReactJS and I figured a potential way out but whenever I click on the remove button I've set it doesn't really remove the items from the cart..
So those are my state managers right here:
let[product, setProduct] = useState([])
//The function bellow is what I use to render the products to the user
const[item] = useState([{
name: 'Burger',
image: '/static/media/Burger.bcd6f0a3.png',
id: 0,
price: 16.00
},
{
name: 'Pizza',
image: '/static/media/Pizza.07b5b3c1.png',
id: 1,
price: 20.00
}])
and I have a function that adds the objects in item to the product array, then I have a function that is supposed to remove them that looks like this:
const removeItem=(idx)=>
{
// let newProduct = product.splice(idx,1)
// setProduct([product,newProduct])
// $('.showItems').text(product.length)
// product[idx]=[]
product.splice(idx,1)
if(product.length<=0)
{
$('.yourCart').hide()
}
}
This function is called from here:
{product.map((item, idx)=>
<div className='yourCart' key={idx}>
<hr></hr>
<div>
<img src ={item.image}></img>
<h3 className='burgerTitle'>{item.name}</h3>
<h4><strong>$ {item.price}.00</strong></h4>
<Button variant='danger' onClick={()=>removeItem(idx)}>Remove</Button>
</div>
<br></br>
</div>)}
The problem is that I've tried to use splice, setState, I tried to even clear the entire array and add the elements that are left after applying the filter function to it but it was all to no avail.
How can I make it so that when I click on the remove button it removes the specific item from the array??

You need to use the mutation method setProduct provided from the useState hook to mutate product state.
const removeItem = (id) => {
const index = product.findIndex(prod => prod.id === id); //use id instead of index
if (index > -1) { //make sure you found it
setProduct(prevState => prevState.splice(index, 1));
}
}
usage
<Button variant='danger' onClick={()=>removeItem(item.id)}>Remove</Button>
as a side note:
Consider using definite id values when working with items in an array, instead of index in array. the index of items can change. Use the item.id for a key instead of the index when mapping. Consider using guids as identification.
{product.map((item, idx)=>
<div className='yourCart' key={`cartItem_${item.id}`}> //<-- here
<hr></hr>
<div>
<img src ={item.image}></img>
<h3 className='burgerTitle'>{item.name}</h3>
<h4><strong>$ {item.price}.00</strong></h4>
<Button variant='danger' onClick={()=>removeItem(item.id)}>Remove</Button>
</div>
<br></br>
</div>)}

You can define removeItem as a function, which gets an id (instead of an index, since that's safer) and setProduct to the subset which should remain. This could be achieved in many ways, in this specific example I use .filter() to find the subset of product whose elements differ in their id from the one that is to be removed and set the result as the new value of product.
removeItem = (id) => {
setProduct(product.filter((i)=>(i.id !== id)))
}

Reordering index when mapping arrays with React

I'm changing object property inside mapping and I want to change index when object property is changed ( = input disabled) , so whats best way to do it?
I've tried making new array for index but can't make it work because then it would need some nested mapping with separate arrays and cant make it work.
edit: I use index to mark text part position in official document, thats why this index is so important.
onToggleTextPart = (e, index) => {
const node = this.myCheckbox[index]
let newStates = [ ...this.state.meeting_parts ];
if(node.checked) {
newStates[index - 1].type_tag = "Included";
}
else {
newStates[index - 1].type_tag = "notIncluded";
newStates.splice(index-1, 1)
}
this.setState({ meeting_parts: newStates });
}
return _.map(meeting_parts, (meet, index) => {
let checked = meet.type_tag === "Included" ? true : false;
return
<div className="form-group">
<div className="input-group">
<div className="input-group-prepend">
<span className="input-group-text minutes-agenda-item-number">
{index} (THIS is the index i want to change)
</span>
</div>
I want to i.e when i hide one object from Index 6, it "gives away" its index and Index 7 takes its position.

Okay as far as I understand you want to do this:
meeting_parts.filter((meet)=>meet.type_tag === "Included").map((meet, index)=>{
// your mapping function here
});
Filter will return an array of the meetings which type_tag is "Included".
You can read about the filter function.
EDIT:
let includedCount = 0;
meeting_parts.map((meet, index)=>{
if(meet.type_tag === "Included") {
includedCount += 1;
}
// your mapping function here but use inlcudedCount instead of index
});
Of course now it displays some numbers mutpliple times. If you don't want them displayed you have to add logic to disable the rendering when necessary.

How to Delete individual items from list in react

I have built a simple ToDo App. Rending the tasks from the form input is working fine, but I am unable to delete the tasks when clicked on Delete button.
export class TodoList extends Component {
constructor(props) {
super(props)
this.state = {
task:'',
items:[]
}
}
onChangeHandler=(e)=>{
this.setState({
[e.target.name]: e.target.value
})
}
addItem=(e)=>{
e.preventDefault()
if (this.state.task!==""){
this.setState({
items:[...this.state.items,this.state.task],
task:''
})
}
}
removeItem=(index)=>{
const remainingItems = this.state.items.filter(j => {
return j !== index
})
this.setState({
items: remainingItems
})
};
render() {
return (
<div>
<form>
<input type='text' name="task"onChange={this.onChangeHandler} value={this.state.task} placeholder='Enter Task'/>
<button type='submit' onClick={this.addItem}>Add Task</button>
</form>
<Lists items={this.state.items}
delete={this.removeItem}/>
</div>
)
}
}
export class Lists extends Component {
removeItems=(index)=>{
this.props.delete(index)
}
render() {
return (
<div>
{this.props.items.map((item,index)=>
<li className="Lists" key={index}>{item}
<button type='button' onClick={this.removeItems(index)}>Remove</button>
</li>)}
</div>
)
}
}

Do you even happen to have any items to delete here or the list comes up empty? Delete function itself looks fine but you have couple of problems here.
Don't use index as a key. In case you're reordering or deleting (which you are doing) an array of items, you can run into a lot of issues. Here's a good article: https://medium.com/#vraa/why-using-an-index-as-key-in-react-is-probably-a-bad-idea-7543de68b17c
Probably the error is with this since you're deleting key which, since it's an iterator, is reassigned to another element when array repopulates itself. Change iterator to some other unique identifier for each element.
You're calling removeItems method as soon as it's set. If you have invoked methods (with ()) inside return of render, it will be executed immediately on each refresh. That's why I'm asking do you have anything to delete at all since, if delete function is okay written, this would probably delete all items as soon as they are added.
Best method would be to use dataset. To each element you can add dataset like this:
data-item-id={some-id} and you can fetch it inside your method from the fired event like this const clickedId = event.currentTarget.dataset.someId. Note that dataset in the element must be written like-this, and it's rewritten automatically when fetching it into camelCase (likeThis). Then you can use this index to target the element you want inside the array and delete it.
Note that the iterator issue still applies, and you need a different unique identifier.
Let me know if you need further explanation.

You can delete the current item using splice method.
removeItem = index=> {
let newArray = this.state.items;
newArray.splice(index, 1);
this.setState({
items: newArray
});
};
It would be better to use onClick for removing item like this :
<button type='button' onClick={()=>this.removeItems(index)}>Remove</button>
Hope this helps.

I prefer to pass item that i would like to remove, index can be decieving becouse it changes.
Find index by unique key, i use item.id as unique key.
removeItem = item => {
const items = this.state.items;
// if using lodash i use findIndex
const index = _.findIndex(items, i => i.id === item.id)
// if plain js
const index = items.findIndex(i => i.id === item.id)
items.splice(index, 1);
this.setState({
items
});
};

React.js - Getting an index of an element from <'div>

I am making a task manager app with React.js and I want to use Drag&Drop function in order to throw an element into the trash can. I am able to use (index) in .forEach, but not sure how to do it inside the trashcan <'div>
Currently I am using array of categories in order to store the tasks depending on their category, but I want to know if there is a way of using .splice() on this situation.
Video of my app for better understanding : https://youtu.be/ug9jzjdbF-I
My state is just an empty where I am pushing data from my "submit" button.
this.state = {tasks:[]}
Empty array of categories (busy,todo,removed,complete) to show the state of the task.
let tasksInBoard = {
todo : [],
busy : [],
complete:[],
removed : []
}
onDragStart function:
onDragStart = (e,id) => {
console.log("dragstart ",id);
e.dataTransfer.setData("id",id);
}
And .forEach to put them on the arrays depending on their category.
this.state.tasks.forEach((t,index)=>{
tasksInBoard[t.category].push(
<CreatedTask
index={index}
key = {index}
member={t.member}
todo={t.toDo}
dod={t.dod}
time={t.time}
draggable = "true"
onDragStart={(e)=> this.onDragStart(e,(t.dod+t.member+t.toDo+t.time))}
styling = {t.styling}
/>
)
}
)
My trash can code div :
<div className="trashCan"
onDrop={(e)=>this.onDrop(e,"removed")}
onDragOver={(e)=>this.onDragOver(e)}>
<p>this is trahscan</p>
</div>

React 16 forces component re-render while returning array

Assume I have the next piece of code inside the React component
removeItem = (item) => {
this.items.remove(item) // this.items -> mobx array
}
renderItem = (item, index) => {
var _item = undefined
switch (item.type) {
case "header":
_item = <Header key={item.id} onRemove={() => this.removeItem(item)} />
// a few more cases
// note that item.id is unique and static
}
// return _item -> works fine
return [
_item,
this.state.suggested
? <Placeholder key={-item.id} />
: null
]
}
render() {
return (
<div>
{this.items.map((item, i) => renderItem(item))}
</div>
)
}
Also assume that inside each of item I have a button that triggers onRemove handler with click. And each component has textarea where user can enter his text.
Obviously, when user enters text inside item's textarea, it should be saved until item will be removed.
The problem is when I remove some item, each item that goes after the removed one is being remounted (edited for Vlad Zhukov). It happens only when I return an array from renderItem(...) (I mean, when I return only item, this problem doesn't happen).
My question: is this a bug, or it's a feature? And how can I avoid it (desirable without wrapping item and Placeholder with another React child)?
UPDATED
I tried rewrite renderItem(...) the next way:
renderItem = (item, index) => {
var Item = undefined
switch (item.type) {
case "header":
Item = Header
// a few more cases
// note that item.id is unique and static
}
// return _item -> works fine
return [
<Item key={item.id} onRemove={() => this.removeItem(item)} />,
this.state.suggested
? <Placeholder key={-item.id} />
: null
]
}
And it still causes the problem.

Rerendering is absolutely fine in React and can be considered the main feature. What happens in your case is components remount when you make changes to an array of elements when these elements have no key props.
Have a look at this simple example. As you can see rerendering components has no difference but removing the first element will clear values of inputs below.
You've got 2 options:
Use a component instead of an array and set key to it (see an example). There is really no reason not to.
Remove all keys. The reason why it works is because React internally already uses keys for elements. However I wouldn't suggest this as it doesn't look reliable enough to me, I'd prefer to control it explicitly.