Unshift array of objects in React

Question

I have an array of objects (this array comes as a prop from the parent component) and the object. I have to add the object at the begging of my array. I've tried different things - nothing works.

const array = [
    {
        key1: 'a',
        key2: 'b',
        key3: 'c',
    },
    {
        key1: 'd',
        key2: 'e',
        key3: 'f',
    },
];

const myObj = {
    key1: '1',
    key2: '2',
    key3: '3',
};

The result I want to see:

const myArray = [
    {
        key1: '1',
        key2: '2',
        key3: '3',
    },
    {
        key1: 'a',
        key2: 'b',
        key3: 'c',
    },
    {
        key1: 'd',
        key2: 'e',
        key3: 'f',
    },
];

I've tried different things - nothing works. What have you tried? array.unshift(myObj) works for me. — tkausl
– tkausl, Commented Aug 6, 2022 at 22:20
unshift doesn't create a new array, but modifies the main one — ILLIA
– ILLIA, Commented Aug 6, 2022 at 22:26

score 4 · Accepted Answer · 2022-08-06 22:27:22Z

4

You can use the spread operator

const newArr = [newObj, ...array]

or

array.unshift(newObj)

edited Aug 6, 2022 at 22:27

answered Aug 6, 2022 at 22:18

user13937286

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

2 Comments

ILLIA Over a year ago

Invalid attempt to spread non-iterable instance. In order to be iterable, non-array objects must have a [Symbol.iterator]() method.

user13937286 Over a year ago

Try to destructure like this , const component = ({ array }) => { const newArr = [newObj, ...array] }

Collectives™ on Stack Overflow

Unshift array of objects in React

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related