Updating local state with react hooks

Question

I'm learning how to use hooks and have still a little trouble comprehending how to use local component state.

In the following component I am fetching data to display as a list. I store that in the local state and display the list.

Now I want to delete an item from the list and update the current variable in the local state that displays the data and remove the one item i just deleted.

Question: How do I use the local state variable, in this case feeds in the deleteFeed method so I can update the list. In class based components I could have just used this.state.feeds to update but how is it done in function components?

import React, { useState, useEffect } from 'react'
import ReactDOM from 'react-dom'

import * as FeedsAPI from '../../../lib/feeds/FeedsAPI'

import FeedsList from './components/FeedsList'
import AddNewFeed from './components/AddNewFeed'
import DSPageLoader from '../../../components/DSPageLoader/DSPageLoader'
import FeedCard from './components/FeedCard'

const AddNewFeedCard = FeedCard(AddNewFeed)

export default function Feeds (params) {
    const[feeds, setFeeds] = useState([])
    const[providers, setProviders] = useState([])
    const[loading, setLoading] = useState(true)
    const[error, setError] = useState(false)

    /**
     * Method used run after evey lifecycle event
     */
    useEffect( () => {      
        Promise.all(
            [
                FeedsAPI.getFeeds('id', 732),
                FeedsAPI.getFeedProviders()
            ]
        )
        .then( response => {
            setFeeds(response[0])
            setProviders(response[1])
            setLoading(false)
        })
        .catch( error => {setLoading(false); setError(error)})
    }, [])

    /** 
     * Update feeds in local state 
     * 
     * @param feed single feed object 
     */
    const updateFeed = (feed) => console.log(feed)

    /**
     * Delete feed
     * 
     * @param feedId 
     */
    const deleteFeed = (feedId) => {
        FeedsAPI.deleteFeed(feedId)
        .then( response => { 
            let updatedFeeds = feeds.filter( feed => feed.id != feedId )
            setFeeds(feeds)
        })
        .catch( error => console.log(error))
    }

    /* TODO: Refactor this to use with page loading HOC */
    if (loading) {
        return <DSPageLoader/>
    }

    return (
        <div className="container">
            <FeedsList 
                feeds={feeds} 
                providers={providers}
                updateFeed={updateFeed}
                deleteFeed={deleteFeed}
                />
            <AddNewFeedCard />
        </div>
    )
}

simple you just use the variable feeds, provided you have defined it BEFORE using it. you have used it correctly with an error that updating you are not setting state to the updated feeds variable — Sujit.Warrier
– Sujit.Warrier, Commented Mar 12, 2019 at 2:10

Sujit.Warrier · Accepted Answer · 2019-03-12 02:11:56Z

1

simple you just use the variable feeds, provided you have defined it BEFORE using it. you have used it correctly with an error that updating you are not setting state to the updated feeds variable

 let updatedFeeds = feeds.filter( feed => feed.id != feedId )
 setFeeds(updatedFeeds) // you were setting it to the old unchanged feeds variable

remember filter function never modifies the original variable it always creates a new object which is modified

answered Mar 12, 2019 at 2:11

Sujit.Warrier

2,8992 gold badges31 silver badges48 bronze badges

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

1 Comment

bos570 Over a year ago

facepalm Dumb oversight on my part. Thanks that was killing me.

Collectives™ on Stack Overflow

Updating local state with react hooks

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related