Javascript React: Push to an array in useState

Question

I'm trying to store an array of strings in the state object under the key of menuHistory, im initialising it with 'first', when the page changes props.location updates, that triggers the useEffect() where I then try to push the location into the array.

The error I'm getting is..

Argument of type '{ menuHistory: number; }' is not assignable to parameter of type 'SetStateAction<{ menuHistory: string[]; }>'.
  Type '{ menuHistory: number; }' is not assignable to type '{ menuHistory: string[]; }'.
    Types of property 'menuHistory' are incompatible.
      Type 'number' is not assignable to type 'string[]'.ts(2345)

import React, {useEffect, useState} from 'react';
import {Link} from 'react-router-dom';

interface propsInterface {
    location: any; 
  }

const SideMenu: React.FC<propsInterface> = (props) => {
  const { global } = useContext(Context) as {global: any; setGlobal: React.Dispatch<React.SetStateAction<any>>};
  const [state, setState] = useState({menuHistory: ['first']});

  useEffect(() => {
    const location = props.location.pathname.split('/')[2];
    setState({menuHistory: state.menuHistory.push(location)});
  }, [props.location])

  return (
    <div className='nav'>
        <Link to={{pathname: '/my/identity'}}><div id='identity'>Identity</div></Link>
        <Link to={{pathname: '/my/accounts'}}><div id='accounts'>Accounts</div></Link>
        <Link to={{pathname: '/my/claims'}}><div id='claims'>Claims</div></Link>
        <hr/>
        <Link to={{pathname: '/my/profile'}}><div id='profile'>Profile</div></Link>
        <Link to={{pathname: '/my/password'}}><div id='password'>Password</div></Link>
        <Link to={{pathname: '/my/settings'}}><div id='settings'>Settings</div></Link>
        <Link to={{pathname: '/my/logout'}}><div id='logout'>Log out</div></Link>
  </div>
  );
}

export {SideMenu};

Виталий Абрамов · Accepted Answer · 2019-09-13 07:18:06Z

2

like @Clarity said, push returns index of pushed item, also this operator mutates object. Best practice is to create another array (eg. by spreading previous value, like suggested), and add a new entry there, like so:

setState({menuHistory: [...state.menuHistory, location]});

answered Sep 13, 2019 at 7:18

Виталий Абрамов

861 silver badge4 bronze badges

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

Comments

Clarity · Accepted Answer · 2019-09-13 07:12:54Z

2

push return an index of element, use array spread to add the item:

setState(state => ({menuHistory: [...state.menuHistory, location]}));

edited Sep 13, 2019 at 7:12

answered Sep 13, 2019 at 7:08

Clarity

10.9k2 gold badges27 silver badges38 bronze badges

2 Comments

Bill Over a year ago

the error has changed to ` ( </li> Argument of type '(state: { menuHistory: string[]; }) => void' is not assignable to parameter of type 'SetStateAction<{ menuHistory: string[]; }>'. Type '(state: { menuHistory: string[]; }) => void' is not assignable to type '(prevState: { menuHistory: string[]; }) => { menuHistory: string[]; }'. Type 'void' is not assignable to type '{ menuHistory: string[]; }'.ts(2345)`

Clarity Over a year ago

@Bill I've updated the answer to return the object properly.

amardeep saini · Accepted Answer · 2019-09-13 12:40:08Z

1

You have defined {menuHistory: ['first']} which is array . Try using concat instead of push.

   setState({menuHistory: state.menuHistory.concat(location)});

answered Sep 13, 2019 at 12:40

amardeep saini

2572 silver badges5 bronze badges

Collectives™ on Stack Overflow

Javascript React: Push to an array in useState

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related