I'm trying to use react hooks in my project and I have a problem with useState when I use array as value.

As you can see in my code below, when I display zoneItems that it should be like items array I get an empty array all the time. Would you have an explanation why?

When I use an object instead of array it works

const ShippingCostZone = ({ zone, datas, selectedProducts, getProductById }) => {
    const items = datas.items.filter(item => item.zoneId === zone.id)
    console.log('========> items', items) // ---- SHOW the good values
    const [zoneItems, updateItems] = useState(items)
    console.log('========> zoneItems  ', zoneItems)   // ---- SHOW all the time []
.........

Thanks in advance

I'm trying to use react hooks in my project and I have a problem with useState when I use array as value.

As you can see in my code below, when I display zoneItems that it should be like items array I get an empty array all the time. Would you have an explanation why?

When I use an object instead of array it works

const ShippingCostZone = ({ zone, datas, selectedProducts, getProductById }) => {
    const items = datas.items.filter(item => item.zoneId === zone.id)
    console.log('========> items', items) // ---- SHOW the good values
    const [zoneItems, updateItems] = useState(items)
    console.log('========> zoneItems  ', zoneItems)   // ---- SHOW all the time []
.........

Thanks in advance

• javascript
• reactjs
• react-hooks
• use-state

• Did you ensure that all the items are not of the zone that you are using to test the functionality? Also the last console.log shows all values or just empty array []? – Kenny John Jacob Commented Aug 18, 2020 at 14:07

2 Answers 2

Due to async nature of hooks, you assignment useState(items) could be executed after you read the content of zoneItems. But react provides an hook that will be fired every time ponent will be loaded, or as you prefer, every time zoneItems changes his value: I'm talking about useEffect hook.

So if you want to print the zoneItems content every time is updated, just write something like this:

useEffect(() => {
    console.log(zoneItems);
}, [zoneItems])

This is the way that react provides to manage async assignment of state.

I think you should initialize the state first as an array first then update it, as follows:

const ShippingCostZone = ({ zone, datas, selectedProducts, getProductById }) => {
    const items = datas.items.filter(item => item.zoneId === zone.id)
    console.log('========> items', items)

    const [zoneItems, updateItems] = useState([])
    
    updateitems(items)

    console.log('========> zoneItems  ', zoneItems)