pushメソッドの使用方法に関して

Question

開発をしてる中で、配列の中にオブジェクトを入れたいのですが、pushを使用してもコンソール上で思った通りに表示されません。
どのようにしたら解決できるのかお教えいただきたいです。
よろしくお願いいたします。

const path = window.location.pathname;
const id = path.split('/')[1];

const footerItems = [
        {path: '', value: 'Home'},
        {path: 'about', value: 'About'},
        {path: 'skill', value: 'Skill'},
        {path: 'works', value: 'Works'}
    ];

const filterItems = [];

useEffect(() => {
    footerItems.map(footerItem => {
        if(footerItem.path !== id){
            return filterItems.push(footerItem);
        }
    })
},[])

console.log(footerItems);
console.log(filterItems);

footerItems →　(4) [{…}, {…}, {…}, {…}]
filterItems →　[]

filterの方をfooterのようにしたいです。

Answer 1

useEffect の外でいいです。
また、↓のように書けます。

const filterItems = footerItems.filter((item) => item.path !== id)

stateに保存する場合は↓のように書きます。

const [filterItems, setFilterItems] = useState([])

useEffect(() => {
  const items = footerItems.filter((item) => item.path !== id)
  setFilterItems(items)
},[id])

Comments

[yamazaki619]

教えていただいた通りにやればできました！！ありがとうございます！