So I have these buttons that do 2 things like checkbox button, Change color , toggle between green and black Stating checked as true or false
My issue is : button that I pressed has mild delay before It changes color, bad performance overall for my app , already tried this in my Redmi 5 Redmi note 9 and Galaxy a8, they all have mild delay with different delay duration Redmi 5 has longest delay like almost 1 sec. My question is : Is there any faster / better performance code for these buttons ? Is this wrong way to do it ?
Here is my code : first I state the initial value
const [booleanMonth,setMonth]=useState([
{key:0,value:'January',title:'Jan',color:'black',checked:false},
{key:1,value:'February',title:'Feb',color:'black',checked:false},
{key:2,value:'March',title:'Mar',color:'black',checked:false},
{key:3,value:'April',title:'Apr',color:'black',checked:false},
{key:4,value:'May',title:'May',color:'black',checked:false},
{key:5,value:'June',title:'Jun',color:'black',checked:false},
{key:6,value:'July',title:'Jul',color:'black',checked:false},
{key:7,value:'August',title:'Aug',color:'black',checked:false},
{key:8,value:'September',title:'Sep',color:'black',checked:true},
{key:9,value:'October',title:'Oct',color:'black',checked:false},
{key:10,value:'November',title:'Nov',color:'black',checked:false},
{key:11,value:'December',title:'Dec',color:'black',checked:false}
])
second, I create the buttons
const createButtonMonth = () =>{
return (<View style={styles.containerForButtons2}>
{
booleanMonth.map((item,key) =>
<View key={item.key} style={styles.buttonFilter3}>
<Button style={styles.buttonFilter3}
title={item.title}
value={booleanMonth[item.key].checked}
color={booleanMonth[item.key].checked==true ? 'green':'black'}
onPress={()=>onPressMonthFilter(booleanMonth[item.key].key,booleanMonth[item.key].checked)}
/></View>)
}
</View>)
}
third I make function to change button color green to back and checked status from false to true vice versa
const onPressMonthFilter = (keyMonth,statusMonth) =>{
let newArr = [...booleanMonth]
if(newArr[keyMonth].checked==false){
newArr[keyMonth].checked=true
}else{
newArr[keyMonth].checked=false
}
setMonth(newArr)
}
thanks for the help
Aucun commentaire:
Enregistrer un commentaire