Checkbox condition in react native - node.js

Question

im trying to put a condition on my checkboxs , i want to set the number of checks for each state
so here i have my JSON file that has 4 elements
[
{
"id": 0,
"key": "Viande hachee",
"checked": false,
"image": "https://i.imgur.com/RuVD8qi.png "
},
{
"id": 1,
"key": "Escalope pane",
"checked": false,
"image": "https://i.imgur.com/WNeYn6d.png"
},
{
"id": 2,
"key": "Escalope grille",
"checked": false,
"image": "https://i.imgur.com/iFpCySw.png"
},
{
"id": 3,
"key": "Cordon bleu",
"checked": false,
"image": "https://i.imgur.com/iRo6ivZ.png"
}
]
this is my code :
export default class Commande extends Component {
constructor(props) {
super(props)
this.state = {
data: TacosData,
SelectedItem: [],
taille: "M"
};
}
onchecked(id) {
const data = this.state.data
const index = data.findIndex(x => x.id === id);
data[index].checked = !data[index].checked
this.setState(data)
}
renderTacos(item, key) {
return (
<TouchableOpacity style={{ alignItems: 'center', marginLeft: normalize(20), marginRight: normalize(20 )}} key={key} onPress={() => { this.onchecked(item.id) }}>
<Image style={styles.rednerImg} source={{ uri: item.image }} ></Image>
<Text style={styles.rednertext}>{item.key}</Text>
<CheckBox value={item.checked}
style={{ transform: [{ scaleX: 0.8 }, { scaleY: 0.8 }], }}
onValueChange={() => { this.onchecked(item.id) }}
tintColors={{ true: '#D05A0B', false: 'black' }}
/>
</TouchableOpacity>
)
}
render() {
return (
<FlatList
data={this.state.data}
style={{ width: '100%', height: '100%', }}
numColumns={2}
renderItem={({ item }) => this.renderTacos(item)}
keyExtractor={(item, index) => index.toString()}
/>
)}
}
For example this the state of taille is 'M' then i can only check only 1 checkox ,
is this case im able to check all of the checkboxes
is there any solution for this ?

Answer 1

From what you said if...
the state of taille is 'M' then i can only check only 1 checkox , is
this case im able to check all of the checkboxes
then code is my answer to handle that case
onchecked(id) {
const data = this.state.data
const index = data.findIndex(x => x.id === id)
if (this.state.taille == 'M') {
for(const i = 0; i < data.length; i++) {
if (i != index) {
data[i].checked = false // reset other checkboxes to unchecked, so when taille is 'M' only clicked checkbox that can be true
}
}
}
data[index].checked = !data[index].checked
this.setState({data})
}
Edit responding case based to the following comment
onchecked(id) {
const data = this.state.data
const index = data.findIndex(x => x.id === id)
let maxCheck = undefined
if (this.state.taille == 'M') {
maxCheck = 1
} else if (this.state.taille == 'L') {
maxCheck = 2
}
let checkboxCheckedTotal = 0
for(const i = 0; i < data.length; i++) {
if (data[i].checked) {
checkboxCheckedTotal++
}
}
if (maxCheck == undefined || data[index].checked || checkboxCheckedTotal < maxCheck) {
data[index].checked = !data[index].checked
}
this.setState({data})
}