How can I add the first to the array in useState in React?-CodePudding

I have an array object called tempArr.

When I run a function called fetchLifeCycle, i want to act setPickerItems(tempArr); is mandatory first, and then setPickerItems([...tempArr, { label: 'Not selected', value: "NONE" }]) .

As a result, { label: 'not selected', value: "NONE" } was added at the end.

But I want to add that object to the first object of pickerItems. How do I do that?

this is my code

    tempArr = [
            { label: "hi", value: 'egg' },
            { label: "bye", value: 'insect' },
            { label: "woo", value: 'pest' },
            { label: "pick", value: 'hambuger' },

    ]


  const [pickerItems, setPickerItems] = useState([])


  const fetchLifeCycle = () => {

    setPickerItems(tempArr);
    setPickerItems([...tempArr, { label: '선택안함', value: "NONE" }])

}

expected answer

pickerItems = [
            { label: '선택안함', value: "NONE" }
            { label: "hi", value: 'egg' },
            { label: "bye", value: 'insect' },
            { label: "woo", value: 'pest' },
            { label: "pick", value: 'hambuger' },
    ]

CodePudding user response：

tempArr = [
            { label: "hi", value: 'egg' },
            { label: "bye", value: 'insect' },
            { label: "woo", value: 'pest' },
            { label: "pick", value: 'hambuger' },

    ]
    
const updated = [{ label: '선택안함', value: "NONE" }, ...tempArr]

console.log('updated', updated)

You just have to reverse the order:

setPickerItems([{ label: '선택안함', value: "NONE" }, ...tempArr])

CodePudding user response：

You can put the new item first, then spread the existing array:

setPickerItems([{ label: '선택안함', value: "NONE" }, ...tempArr])

CodePudding user response：

Just simple:

setPickerItems([{ label: '선택안함', value: "NONE" }, ...tempArr])