State update issue

I have state object with properties as below

const initialState = {      
    active:false,
    section: []
}

const[state, setState] = useState(initialState)

const binType = ()  => {
    const selectedBin = []
    data.map((item) => {
      if(item.Bin == val){

        item.title = item.Item
        item.content = item.Description
        selectedBin.push(item)
       }

    })
    setState({..state,section:selectedBin})
    console.log(state.section)
}

Outputs empty arrary. Any idea how to update object properties.

Comments

[Arunava Modak]

Instead of trying to log it right after setState, you can try to write a useEffect, which watches for changes in state and print it there.

The problem here is, your state value is getting logged before the update in completed in your state.

[shrijan]

But if i do

const [section, setSection ] = useState([]);
const binType = ()  => {
    const selectedBin = []
    data.map((item) => {
      if(item.Bin == val){

        item.title = item.Item
        item.content = item.Description
        selectedBin.push(item)
       }

    })

   console.log(selectedBind) //outputs array
    setState({...section,selectedBin})
   console.log(section) //outputs array
}

I am not sure if i am doing something wrong here

setState({...state,section:selectedBin})

Thanks for your help

[korzo]

Because you never update selectedBin variable.
Also state will be updated on next re-render.

[shrijan]

Can you please clarify what do mean by selectedBin variable is never updated.

const initialState = {      
    active:false,
    section: []
}

const[state, setState] = useState(initialState)

const binType = ()  => {
    const selectedBin = []
    data.map((item) => {
      if(item.Bin == val){

        item.title = item.Item
        item.content = item.Description
        selectedBin.push(item)
       }

    })

   console.log(selectedBind) //outputs array
    setState({...state,section:selectedBin})

}
useEffect(() => {
        console.log('sections',state.section)
},[state.section])

I have updated code still same issue. Array is empty.

Thanks for your help