Question 242171 in React native Question posted in
The official React Native documentation can be found here.

How do I map an array and change the color of the text of just the item I tap on using React Native?

How do I change the color of a single item from a mapped array? My code below will change the color of all the items in the array to green. I want just the item I tap on to turn green. Any help would be appreciated.

import { Text, StyleSheet, View, Pressable } from 'react-native';
import { useState } from 'react';

const PickNotesToTranspose = () => {

    const chromaticArrChoose = ['C', 'C#', 'D', 'D#/Eb', 'E', 'F', 'F#/Gb', 'G', 'G#/Ab', 'A', 'A#/Bb', 'B'];
    const [isPressed, setIsPressed] = useState(false);

  

    const mapArrChoose = chromaticArrChoose.map((c, index) => {
        const handlePress = () => {
            isPressed ? setIsPressed(false): setIsPressed(true);
        
        }

        return (
            <Pressable key={index} onPress={() => handlePress()}>
                <Text style={[isPressed? styles.selectedNote: styles.chromatic]}>{c}</Text>
            </Pressable>
        )
    })
    return (
        <Text>{mapArrChoose}</Text>
    )
}


export default PickNotesToTranspose;

const styles = StyleSheet.create({
    chromatic: {
        fontSize: 32,

    },
    btnStyle: {
        borderWidth: 1,
    },

    chooseKeyTxt: {
        marginTop: 50,
        fontSize: 20,
        textAlign: 'center',
    },

    selectedNote: {
        color: 'green',
        fontSize: 32,

    },


})
Tags:

2

Answers


  1. 0

    You should save pressed states in object or array variable.
    For example, refer below codes.

    import { Text, StyleSheet, View, Pressable } from 'react-native';
import { useState } from 'react';

const PickNotesToTranspose = () => {

    const chromaticArrChoose = ['C', 'C#', 'D', 'D#/Eb', 'E', 'F', 'F#/Gb', 'G', 'G#/Ab', 'A', 'A#/Bb', 'B'];
    const [pressedState, setPressedState] = useState({});

  

    const mapArrChoose = chromaticArrChoose.map((c, index) => {
        const handlePress = () => {
            const isPressed = pressedState[index];
            setPressedState((values) => ({
                ...values,
                [index]: isPressed ? true : false,
            }));
        }

        return (
            <Pressable key={index} onPress={() => handlePress()}>
                <Text style={[pressedState[index]? styles.selectedNote: styles.chromatic]}>{c}</Text>
            </Pressable>
        )
    })
    return (
        <Text>{mapArrChoose}</Text>
    )
}

    Wishing this could help you.

    Login or Signup to reply.
  2. 0

    You have created a common sharing state and every item of JSX is pointing or looking the value of pressed at same place.

    You can create an state of all item and then use that state to get value of pressed as:

    const PickNotesToTranspose = () => {

    const chromaticArrChoose = ['C', 'C#', 'D', 'D#/Eb', 'E', 'F', 'F#/Gb', 'G', 'G#/Ab', 'A', 'A#/Bb', 'B'];

    // CHANGE
    const [pressed, setPressed] = useState(() => chromaticArrChoose.reduce((acc, curr) => ({ ...acc, [curr]: false }), {}));

  

    const mapArrChoose = chromaticArrChoose.map((c, index) => {
        const handlePress = () => {

            // CHANGE
            setPressed(state => ({ ...state, [c]: !state[c]}))
        }

        return (
            <Pressable key={index} onPress={() => handlePress()}>

                // CHANGE
                <Text style={[pressed[c]? styles.selectedNote: styles.chromatic]}>{c}</Text>
            </Pressable>
        )
    })
    return (
        <Text>{mapArrChoose}</Text>
    )
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search