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!