React.js state items array not updating properly even not showing any error

Question

At first please see the picture for actually what's going on

The issue is while marked the checkbox then text erasing but I want to update a state field from state array & the functionalities are like below

state = {
    items: [
        { id: 1, text: 'Buy milk', done: true },
        { id: 2, text: 'Deed cat', done: false },
        { id: 3, text: 'Wash floor', done: false }
    ]
};

markItemDone = (i) => {
    this.setState(state => {
        const items = state.items.map((item) => {
            if (item.id === i){
                return item.done = true;
            } else {
                return item;
            }
        });

        return {
            items,
        };
    });
}

JSX:

 <input 
    type="checkbox" 
    onClick={() => this.markItemDone(item.id)}
    defaultChecked={item.done ? true : null}
 />

I'm not finding the actual solution.

Thanks

JKillian · Accepted Answer · 2019-02-11 03:56:12Z

4

In your code, you say return item.done = true;. This is returning a boolean instead of an item object and thus why you see 1: true in your screenshot. Instead, you want something like this:

        if (item.id === i){
            return {
                ...item,
                done: true,
            };
        } else {
            return item;
        }

This will make a copy of the original item object, set its done field to be true, and return the new item.

answered Feb 11, 2019 at 3:56

JKillian

18.4k8 gold badges45 silver badges78 bronze badges

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

Comments

Dacre Denny · Accepted Answer · 2019-02-11 04:00:01Z

0

This line in your map callback:

return item.done = true;

will map item to undefined for the item where id === i. Try revising your map callback as shown:

const items = state.items.map((item) => {

    /* Return copy of item. If id === item.id, add done : true to 
        mapped result. For all other cases, ensure done is undefined */ 
        return { ...item, done : id === item.id ? true : undefined };

});

edited Feb 11, 2019 at 4:00

answered Feb 11, 2019 at 3:56

Dacre Denny

30.4k5 gold badges53 silver badges66 bronze badges

2 Comments

JKillian Over a year ago

It'd probably be advisable not to mutate item directly here.

Dacre Denny Over a year ago

@JKillian agreed

Collectives™ on Stack Overflow

React.js state items array not updating properly even not showing any error

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related