用 prop 改变 Usestate Object

Question

I am trying to change the value of items in the selectedItems Object, but the changeSelectedItems function always sets the name of the variable to type instead of the value of the property 'type'. How do i use the type property as the name for the value?

const [selectedItems, SetselectedItems] = useState({
  shirt:'none',
  pants:'none',
  hat:'none',
})

const changeSelectedItems = (name,type) =>{
  SetselectedItems({type:name})
}

<div onClick={() =>changeSelectedItems('blue shirt','shirt')}> blue shirt </div>
<div onClick={() =>changeSelectedItems('jeans','pants')}> jeans </div>
<div onClick={() =>changeSelectedItems('tophat','hat')}> tophat </div>

Answer 1

it should be

  const [selectedItems, SetselectedItems] = useState({
    shirt:'none',
    pants:'none',
    hat:'none',
  })

  const changeSelectedItems = (name,type) =>{
    SetselectedItems(selected => ({...selected, [type]:name}))
  }

<div onClick={() =>changeSelectedItems('blue shirt','shirt')}> blue shirt </div>
<div onClick={() =>changeSelectedItems('jeans','pants')}> jeans </div>
<div onClick={() =>changeSelectedItems('tophat','hat')}> tophat </div>

Answer 2

if you want to change the state of a specific key do it like this

SetselectedItems(oldState => ({...oldState, [type]:name}))

the spread operator ... get all object without what specific key you put the value

Answer 3

Just go:

 const changeSelectedItems = (name,type) =>{
    SetselectedItems({...selectedItems, [type]: name })
  }

Here's some info about the spread syntax I've used and you can read more about computed properties in this article .