how to append object array to current state in react functional component

Question

this is my state

const [dataItem, setDataItem] = useState({
    id: null,
    code: null,
    title: null,
    prent: null,
    unitId: null,
});

and i want append file to dataItem state

let file = [
    {
        uid: '1',
        name: items.file,
        status: 'done',
    },
];
setDataItem({ ...dataItem, file });

but it instead of append to dataItem , it replaced and other elements(e.g id, code, title) will be null dataItem state after append file

{
    "id": null,
    "code": null,
    "title": null,
    "prent": null,
    "unitId": null,
    "file":[{
        "uid": "1",
        "name": "u104.svg",
        "status": "done"
    }]
}

What is the expected output after append file to dataItem state? — palaѕн
– palaѕн, Commented Apr 4, 2020 at 7:42

dungmidside · Accepted Answer · 2020-04-04 07:58:35Z

1

Because the state was initialized to an object instead of an array. It should be

const [dataItem, setDataItem] = useState([{
    id: null,
    code: null,
    title: null,
    prent: null,
    unitId: null,
}]);

When update dataItem, you have to spread array file too

setDataItem({ ...dataItem, ...file });

Read more => Correct modification of state arrays in ReactJS

edited Apr 4, 2020 at 7:58

answered Apr 4, 2020 at 7:40

dungmidside

5188 silver badges20 bronze badges

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

Comments

Steric · Accepted Answer · 2020-04-04 08:21:34Z

0

To append file keeping the previous state intact, you'll need to use functional updates.

let file = [
  {
    uid: '1',
    name: items.file,
    status: 'done',
  },
];
setDataItem(prevState => ({ ...prevState, file }));

answered Apr 4, 2020 at 8:21

Steric

4156 silver badges13 bronze badges

Collectives™ on Stack Overflow

how to append object array to current state in react functional component

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related