how to push an object into array using react

Question

This is my initial state constant object, I'm trying to add a new comment items into comments but this code which is not pushing my object into it where i'm doing wrong thanks in advance.

    export const comments = [];

    export const BlogPostReducer = (state = comments, action) => {
        switch (action.type) {
            case 'ADD_COMMENT':
                return [
                ...state,
                {
                    name: action.comment.name,
                    subject: action.comment.subject,
                    message: action.comment.message
                }
            ];
            default:
                return state;
        }
    };
after i used see console here...still im getting empty state

image here

@Hana Alaydrus can you help me on this

kumar
– kumar

2017-07-19 04:42:12 +00:00
Commented Jul 19, 2017 at 4:42 — kumar
– kumar, Commented Jul 19, 2017 at 4:42

pritesh · Accepted Answer · 2017-07-19 04:40:55Z

1

For pushing new object you need to do as

return [
    ...state,
    {
       name: action.comment.name,
       subject: action.comment.subject,
       message: action.comment.message
    }
];

This will create and new array, push the object in it and return it

answered Jul 19, 2017 at 4:40

pritesh

2,20222 silver badges26 bronze badges

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

1 Comment

kumar Over a year ago

hi can you check the console image i have attached to my question after usage of your code

Lakshitha Ruwan · Accepted Answer · 2017-07-19 05:30:46Z

0

If you want to add it to an array in the immutable way, you should use 'concat'

try below code.

export const comments = [];

export const BlogPostReducer = (state = comments, action) => {
    switch (action.type) {
        case 'ADD_COMMENT':
            return state.concat({name: action.comment.name,subject: action.comment.subject,message: action.comment.message});
        default:
            return state;
    }
};

answered Jul 19, 2017 at 5:30

Lakshitha Ruwan

9691 gold badge9 silver badges12 bronze badges

Comments

kumar · Accepted Answer · 2017-07-19 05:31:25Z

0

This way i have achieved,

const addCommentToArray = (state, action) => {
    return [...state.comments, {
        name: action.comment.name,
        subject: action.comment.subject,
        message: action.comment.message
    }];
}

export const BlogPostReducer = (state = initialState, action) => {
    switch (action.type) {
        case 'ADD_COMMENT':
            return Object.assign({}, state, { comments: addCommentToArray(state, action) });

        default:
            return state;
    }
};

answered Jul 19, 2017 at 5:31

kumar

1092 silver badges13 bronze badges

Comments

Fawaz · Accepted Answer · 2017-07-19 08:25:52Z

0

You need to pass comment to store as argument and append to comments.

export const BlogPostReducer = (state, action) => {
    switch (action.type) {
        case 'ADD_COMMENT':
            let { comments } = state;
            comments = comments || [];
            comments.push(action.comment);
            state.comments = comments;
            return state;
        default:
            return state;
    }
};

answered Jul 19, 2017 at 8:25

Fawaz

3,5603 gold badges20 silver badges23 bronze badges

1 Comment

Mario Tacke Over a year ago

This is a very bad approach as it mutates the state. @kumar's answer is much better.

Collectives™ on Stack Overflow

how to push an object into array using react

4 Answers 4

1 Comment

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related