ReactJS: How to add an existing array to another array using react hooks? (CLOSED)

Question

I am trying to add an array to an existing array using react hooks. The only problem I have is everything I try it keeps not filling the array...

const [ residenceFinal, setResidenceFinal ] = useState([]);

I created the the value here and beneath I am trying to add an existing array to residenceFinal.

const predefinedMenuItems = {
      residences: {
            closeOnClick: false,
            setActiveOnClick: true,
            tooltip: "Residences",
            content: <i className='fas fa-city'/>,
            onClick: () => {
                dispatch(getValue(value));
            },
            getContent: (controlledEntity) => {
                const divTitle = "Residence info";

                let res = controlledEntity.info;
                const {data} = res;
                let residencesInfo = [];
                _.isArray(data) ? residencesInfo = data : residencesInfo.push(data);

                let resiFinal = residencesInfo.map(function(el) {
                    var o = Object.assign({}, el);
                    o.isActive = false;
                    return o;
                  })

                setResidenceFinal(resiFinal);
                return <div className="open-data-information-drawer-item residences">
                    <h1>{divTitle}</h1>
                    <div className="open-data-item-information-container">
                        {residenceFinal.map((residence, idx) => {
                            return <div className={"open-data-item-information-container-item "+ (residence.isActive ? 'active' : '') + " item-" + idx}  onClick={ (e) => onClickIdentification(residence, idx)} key={idx}>
                                {getOpenDataLi(residence, "identificatiecode")}
                                {getOpenDataLi(residence, "status")}
                                {getOpenDataLi(residence, "oppervlakte")}
                        }
                            </div>;
                        })}
                    </div>
                </div>;

            }
       }
}

So I have tried alot of variations to add resiFinal to residenceFinal (naming is gonna change when i fixed it btw) but every time I check, the residenceFinal is still empty...

Can somebody help me?

Edit: added where the getContent is used.

const [ drawerContent, setDrawerContent ] = useState(<div></div>);

function handleClick(index, e) {
        const selectedMenuItem = menuItems.find(m => m.id === index);

        setDrawerContent(selectedMenuItem.getContent(openData));
    }

<List.Item >
    <div key={predefinedMenuItemId} onClick={ e => handleClick(predefinedMenuItemId, e)}  className={isMenuItemActive ?  'list-item list-item-' + predefinedMenuItemId  : 'list-item list-item-' + predefinedMenuItemId }></div>
</List.Item >

Did you consoel.log() the values for residencesInfo adn resiFinal variables like right before setResidenceFinal(resiFinal)? — vahdet
– vahdet, Commented Feb 21, 2020 at 9:41
try: setResidenceFinal([...resiFinal]); but correct way to set state is: setResidenceFinal([... residenceFinal, ...resiFinal]); persist the previous state as well. — Zain Ul Abideen
– Zain Ul Abideen, Commented Feb 21, 2020 at 9:42
It's not clear what your code is supposed to do. Where is getContent used and when is it called? Also a getter usually is side-effect-free meaning it doesn't change the applications state when called. But that may be just due to bad naming. If your goal is to append resiFinal to the current state then it's just: setResidenceFinal(current => [...current, ...resiFinal]); — trixn
– trixn, Commented Feb 21, 2020 at 9:50

Michael Nelles · Accepted Answer · 2020-02-21 10:09:42Z

1

You need to employ Spread Syntax

example of how it works:

var colors = ['red', 'green', 'blue'];
var refColors = [...colors, 'yellow'];
//colors => ['red', 'green', 'blue']
//refColors => ['red', 'green', 'blue', 'yellow']

So for your case

setResidenceFinal(current => [...current, ...resiFinal])

edited Feb 21, 2020 at 10:09

answered Feb 21, 2020 at 10:06

Michael Nelles

6,0588 gold badges49 silver badges61 bronze badges

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

Comments

Zain Ul Abideen · Accepted Answer · 2020-02-21 10:58:20Z

0

You can use spread syntax to achieve this:

setResidenceFinal([... residenceFinal, ...resiFinal]);

As told you in my comment above, it's the correct way to set the state, preserving previous state while adding new state. One should never mutate the state directly.

edited Feb 21, 2020 at 10:58

answered Feb 21, 2020 at 10:42

Zain Ul Abideen

1,6122 gold badges13 silver badges27 bronze badges

Comments

akhtarvahid · Accepted Answer · 2020-02-21 11:00:54Z

0

The way you can add array to existing array

push() method
spread operator
concat() method

let array = [1,2];
array.push(...[3,4])
console.log(array)

let array2 = [10,11];
let newArray = [...array2, ...[12,13]];
console.log(newArray)

let array3 = [20,21];
let newArray2 = [22,23].concat(...array3)
console.log(newArray2)

you can add using such ways.

setResidenceFinal([...residenceFinal, ...resiFinal]);

Recommended to use spread operator for updating state in react

edited Feb 21, 2020 at 11:00

answered Feb 21, 2020 at 10:03

akhtarvahid

9,7992 gold badges30 silver badges33 bronze badges

1 Comment

faerin Over a year ago

While this is correct, push is not good practice to use for state-updates with React as that does mutate.

Collectives™ on Stack Overflow

ReactJS: How to add an existing array to another array using react hooks? (CLOSED)

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related