Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6287

How do I make a function execute on a single item within a mapped array instead of every item in the array?

$
0
0

I am currently working on a React project and am having difficulty with getting a function to work on a single item within a mapped array.

I have an array of objects in a different file that look like this:

export const CUSTOMERS = [  {    customer_id: '1',    name: "John Doe",    profile_picture: "https://img.freepik.com/free-photo/portrait-white-man-isolated_53876-40306.jpg?size=626&ext=jpg",    approval_status: false,    payment_method: Enums.OrderPaymentMethod.IN_PERSON  },  {    customer_id: '2',    name: "Evan Green",    profile_picture: "https://media.istockphoto.com/photos/portrait-concept-picture-id1016761216?k=6&m=1016761216&s=612x612&w=0&h=j-DyZTSqmnhoHKsJdGmiMPnungpHiq9UTrvx4UylMQI=",    approval_status: false,    payment_method: Enums.OrderPaymentMethod.IN_PERSON  },  {    customer_id: '3',    name: "Grace Lewis",    profile_picture: "https://img.freepik.com/free-photo/friendly-brunette-looking-camera_23-2147774849.jpg?size=626&ext=jpg",    approval_status: false,    payment_method: Enums.OrderPaymentMethod.IN_PERSON  }, ...]

Currently, I have them mapped out like this:

 const displayContacts = () =>    CUSTOMERS.map((person) => (<AvatarContainer onPress={onClickAvatar}><Avatar          picture={{uri: person.profile_picture}}          onPress={() => showIcon(person.customer_id)}        /><TextAvatar>{person.name}</TextAvatar>        {visible && <CheckIcon />}</AvatarContainer>    ));

Now, I want to make it so that when I press on a single Avatar, a checkmark comes up to show that I selected that avatar. I am trying to make it so that when I select an avatar, the checkmark displays on the individual avatar.

This is my showIcon function that displays and removes the checkmark on click:

const [visible, setVisible] = useState(false);  const showIcon = () => {    // eslint-disable-next-line @typescript-eslint/no-shadow    setVisible((visible) => !visible);    onClickAvatar();  };

Help is much appreciated!


Viewing all articles
Browse latest Browse all 6287

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>