change Usestate Object with prop

user_8921664 0
Viewed 52

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>
use-state reactjs javascript
3 Answers

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>
user_143268990

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

user_91614780

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.

user_117175950
Related