CODEWITHSUNDEEP
javascriptarraysreactjsreact-native
LoF10
LoF10

Reputation: 2127

How can I highlight multiple items when I map over an array of objects?

I am trying to figure out how to highlight multiple objects that get chosen, or better yet invoke the check mark that I've inserted in my code. My snack is here:

https://snack.expo.io/@fauslyfox110/testingreferrals

the specific mapping is here:

const ContactRow = React.memo(
  ({ onPress, name, email, phone, selected }: ContactRowProps) => {
    return (

      <TouchableHighlight onPress={onPress}>
        <View
          style={{ padding: 16, flexDirection: 'row', alignItems: 'center' }}>
             <Text style={{ marginRight: 16 }}>{selected ? '✅' : '⭕️'}</Text>
            <View style={{ flex: 1 }}>
              <Text>{name}</Text>
              {name.length > 0 && (
                <View>
                <Text style={{ marginTop: 4, color: '#666' }}>
                  {email}
                </Text>
                <Text style={{ marginTop: 4, color: '#666' }}>
                  {phone}
                </Text>
                </View>
              )}
            </View>
          </View>
      </TouchableHighlight>

          );
      }
    );

I am pulling contacts from my phone and then mapping over them to render them as a list. I am able to choose multiple items and pass the number to render in the buttons, but I'd like them to switch to a check mark or change color as well to help the user.

Upvotes: 0

Views: 364

Answers (1)

Siva Kondapi Venkata
Siva Kondapi Venkata

Reputation: 11001

I notice that you are not passing "selected" prop to ContactRow.

<ContactRow
    onPress={ ()=> this.addSelectedContact({id: contact.name,name: contact.name, email:contact.email, phone:contact.phone}) }
    name={ contact.name } 
    emailOrNumber={ contact.email || contact.phone }
/>

Change to

<ContactRow
    onPress={ ()=> this.addSelectedContact({id: contact.name,name: contact.name, email:contact.email, phone:contact.phone}) }
    name={ contact.name } 
    emailOrNumber={ contact.email || contact.phone }
    selected={Boolean(this.state.selectedContacts.find(item => item.name === contact.name && item.phone === contact.phone)}
/>

Upvotes: 1

Related Questions