How can i remove an object from an array state in Redux/react

Question

I want to remove an object from an array onClick when I click on the delete button, I write some code in my redux and react as well and it is not working !!

My reducers

import { ActionsTypes } from "../Constant/ActionsTypes";

argument(state, action)


const initialState = {
    events : [],
    days : (""),
};


export const SetEventReducer = (state = initialState, action) => {
    switch(action.type) {
      case ActionsTypes.SET_EVENTS : 
            return {... state, events : action.payload};
      default : 
        return state;
    }

};


export const trackDaysReducer = (state= initialState, action) => {
    switch(action.type) {
        case ActionsTypes.TRACK_DAYS: 
            return {... state, days : action.payload}
        default : 
            return state;
    }
};



export const removeEventReducer = (state = initialState,action) => {
    switch(action.type) {
      case ActionsTypes.REMOVE_EVENT : 
            return {}
      default : 
        return state;
    }

};

Event array represents my state array

My Event Component who contains the button

import React from 'react'
import { useSelector, useDispatch } from 'react-redux';
import { RemoveEvent } from '../Redux/Actions/ActionsEvents';

const Event = () => {
    const events = useSelector((state)=> state.allEvents.events);
    const removeEvents = useSelector((state)=> state.removeEvents);
    const dispatch = useDispatch();

    const removeEventHandler = () => {
        dispatch(RemoveEvent({}))
    }
    return (
    <section>
    {events.map((singleEvent)=> {
        const {title, id, day} = singleEvent;
        return (
            <article className="event-pop-up" key={id} >
                <h1>The Name of your Event is <span>{title}</span></h1>
                <button className="btn event"
                        onClick={removeEventHandler}>
                            Delete Event</button>
            </article>
         )
    })}
    </section>
    )
}

export default Event;

RemoveEventAction

export const RemoveEvent = (id) => {
    return {
        type : ActionsTypes.REMOVE_EVENT,
    };
};

This is the link to check out the app : https://boring-boyd-ecbeee.netlify.app/

What do you think? Thanks

Nokwiw · Accepted Answer · 2021-08-19 11:04:08Z

1

Try this code :

in yours reducers :

export const removeEventReducer = (state = initialState,action) => {
    switch(action.type) {
      case ActionsTypes.REMOVE_EVENT : 
            return {... state, events : state.events.filter((event) => event.id !== action.payload)} // payload = id in this case
      default : 
        return state;
    }

then in your Event Component who contains the button :

import React from 'react'
import { useSelector, useDispatch } from 'react-redux';
import { RemoveEvent} from '../Redux/Actions/ActionsEvents';

const Event = () => {
    const events = useSelector((state)=> state.allEvents.events);
    const removeEvents = useSelector((state)=> state.removeEvents);
    const dispatch = useDispatch();

    const removeEventHandler = (id) => {
        dispatch(RemoveEvent(id))
    }
    return (
    <section>
    {events.map((singleEvent)=> {
        const {title, id, day} = singleEvent;
        return (
            <article className="event-pop-up" key={id} >
                <h1>The Name of your Event is <span>{title}</span></h1>
                <button className="btn event"
                        onClick={()=> removeEventHandler(id)}>
                            Delete Event</button>
            </article>
         )
    })}
    </section>
    )
}

export default Event;

then in your RemoveEvent action

export const RemoveEvent = (id) => {
    return {
        type : ActionsTypes.REMOVE_EVENT, payload: id
    };
};

edited Aug 19, 2021 at 11:04

answered Aug 19, 2021 at 10:06

Nokwiw

3964 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

12 Comments

TheRealJohnDoe Over a year ago

Should the action of removeEventReduce stay the same or should I pass a payload to it?

Rakesh K Over a year ago

Yes pass the event id which you want to delete. and then in reducer use filter method to filter out that event from the event array. The above answer is what you need.

Nokwiw Over a year ago

Yes the action's payload of removeEventReduce should equal the event's id that you want to delete

TheRealJohnDoe Over a year ago

I updated my code above and i updated my action remove event and I pass id to it please check out if it is correct or not

Nokwiw Over a year ago

I don't see the update, where can i check

|

Awais · Accepted Answer · 2021-08-19 11:23:43Z

0

You can remove an event using it's id.

const removeEventHandler = (id) => {
    dispatch(RemoveEvent(id))
}
return (
<section>
{events.map((singleEvent)=> {
    const {title, id, day} = singleEvent;
    return (
        <article className="event-pop-up" key={id} >
            <h1>The Name of your Event is <span>{title}</span></h1>
            <button className="btn event"
                    onClick={() => removeEventHandler(id)}>
                        Delete Event</button>
        </article>
     )
})}
</section>

After passing this id to the reducer you can loop through the events array and remove this event from array and set the new state.

And in your reducers, you can use filter() method to remove a particular event having that id

 export const removeEventReducer = (state = initialState, action) => {
    switch(action.type) {
      case ActionsTypes.REMOVE_EVENT : 
            return {... state, events : state.events.filter((event) => event.id !== action.payload)}
      default : 
        return state;
    }
}

For Remove Event Action:

export const RemoveEvent = (id) => {
    return {
        type : ActionsTypes.REMOVE_EVENT,
        payload: id,
    };
};

edited Aug 19, 2021 at 11:23

answered Aug 19, 2021 at 9:57

Awais

3413 silver badges11 bronze badges

8 Comments

TheRealJohnDoe Over a year ago

Thank you for your help but Where should I pass the id in the reducer?

Awais Over a year ago

@TheRealJohnDoe I have added the code for reducer in the answer. id will be passed in action param of the reducer function, which we will use in filter() method to remove that event.

TheRealJohnDoe Over a year ago

I updated my code above and I updated my action remove event and I pass id to it please check out if it is correct or not

Awais Over a year ago

@TheRealJohnDoe I have updated the code in my answer. you need to add payload property

Awais Over a year ago

@TheRealJohnDoe You need to remove {} around the id

|

Collectives™ on Stack Overflow

How can i remove an object from an array state in Redux/react

2 Answers 2

12 Comments

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

12 Comments

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related