Issue
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.
Solution
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]);
}
Answered By - Jun De Leon
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.