React Native - How to change the style and properties to a pressed row inside a map loop

user_8844742 0
Viewed 49

I would like to change the style when the button is pressed, but just change the pressed one, not all the row list. How can achieve this in React-native. This is what I have tried.

//hooks
    const [activeStyle, setActiveStyle] = useState(styles.container);
    const handlerOnPress = (item: string, index: number) => {
        
        setActiveStyle({
            backgroundColor: AppColors.tertiary,
            padding: 10,
            borderRadius: 10,
        })
    }

    return data.map( (item, index) => {
        return (
            <TouchableOpacity
                key={ index }
                activeOpacity={ 0.3 }
                onPress={ () => handlerOnPress( item, index ) }
            >
                <View style={ activeStyle }>
                    <Text style={{
                        ...globalStyle.subTitle,
                        color: AppColors.black
                    }}>{ item }</Text>
                </View>
            </TouchableOpacity>
        )
    } );

I want to achieve something like this, when you press the button, the one that has been pressed change, not all of them.

result

react-native typescript reactjs javascript
1 Answers

Ok, I found a solution. This is what I did

    const handlerOnPress = ( index: number ) => {
        //copy state of all the items
        let items = [...buttons];
        //this 'for' is optional in case you want to have just one button selected instead of allow user select multi options
        for (let i = 0; i < data.length; i++) {
            //set all busy as false
            items[i].busy = false;
        }
        //copy the item to modify
        let selectedItem = {...buttons[index] };
        //make the change
        selectedItem.busy = !selectedItem.busy;
        //put back the changed item to our copy state
        items[index] = selectedItem;        

        //onchange 
        onChange( selectedItem.hour, 'hora');
        //change the state
        setButtons([...items]);
    }
user_88447420
Related