Property not being added to object

Question

I have a object which has an array inside it. Each array has multiple objects. So using the .map function I am looping over the array inside the object. Each array item has a click function where I toggle the item. Initial state of the array item is this

{
    DisplayText: "Foresatte"
    Selectable: true
    UserRecipientToInclude: "IncludeGuardianRecipient"
}

When I do this

choice.Selected = false

and console logs the result the newly added item is not present in the object. Why is that?

Here is the code

{c.UserDropdownMenuChoices.map(choice => {
    return ( <TouchableHighlight
      {...testProperties(choice.DisplayText, true)}
      style={{ opacity: !choice.Selectable ? 0.4 : 1 }}
      onPress={() => {
        this.selectChoice(c.UserDropdownMenuChoices, choice, c)
      }}
      underlayColor={'transparent'}
      key={choice.DisplayText}
    >
      <View style={styles.choiceContainer}>
        {
          choice.selected ? (
            //<MaterialCommunityIcons name={'checkbox-marked'} style={styles.checkboxClick} size={20} />
            <Icon
              type={'material-community'}
              name={'checkbox-marked'}
              iconStyle={styles.checkboxClick}
              size={20}
            />
          ) : (
            <Icon
              type={'material-community'}
              name={'checkbox-blank-outline'}
              iconStyle={styles.checkboxDefault}
              size={20}
            />
          )
          //DONE: <MaterialCommunityIcons name={'checkbox-blank-outline'} style={styles.checkboxDefault} size={20} />
        }
        <Text style={styles.displayText}>{choice.DisplayText}</Text>
      </View>
    </TouchableHighlight> )}

and my function is like this

  selectChoice(choicesList, choice, contact) {
    choice.selected = true
    ...
    console.log(choice) // doesn't have the new property
  }

This code is for a react native application

It isn't clear what `choice` is from your example. Please edit this down to a [Minimal, Complete, and Verifiable example](https://stackoverflow.com/help/mcve). — romellem, Jul 08 '21 at 17:47

Crashtor · Answer 1 · 2021-07-08T20:48:34.417

I have previously solved a similar issue by simply scoping out the select hook inside the .map without mapping the attribute onto the array itself.

So what I did was:

import MenuRow from "./menu_row"
...

 const Rooms = allRooms.map((room, index) =>  {
   return (
      <MenuRow key={room.id} room={room}/>
   )
 })

Inside MenuRow.js

const MenuRow = (props) => {
    let room = props.room
    const [selected, setSelected] = useState(true) // Checked by default
    return (
    
     <TouchableOpacity onPress={() => {setSelected(!selected), applySelected(room.id, selected) }}  style={s.checkrow}>
       ...
       {selected ? 
          // SELECTED
          <View style={s.checked}></View>
       :
          // NOT SELECTED
          <View style={s.unchecked}></View>
       }
     </TouchableOpacity>

)

However you could also give this a try: https://stackoverflow.com/a/44407980/4451733

Property not being added to object

1 Answers1