props.onClick undefined checkbox React Native - react-native

Question

I am using the Checkbox component for my code and I have a list of elements and for each element I have a checkbox. However, my checkbox returns the following error when I check it on the phone simulator :
TypeError: this.props.onClick is not a function. (In 'this.props.onClick()', 'this.props.onClick' is undefined)
I don't understand because a checkbox does not require the onClick function ...
Please see my code below if needed:
import CheckBox from 'react-native-check-box'
export default class List extends Component {
constructor(props) {
super(props)
this.state = {
names: [
{
key: 0,
name: 'Element1',
isChecked: false
},
{
key: 1,
name: 'Element2',
isChecked: false,
}
]
}
}
checkboxTest(key){
let names = this.state.names.reduce((acc,name)=>{
if(name.key === key){
return {...name, isChecked: !name.isChecked}
}
return name
}, [])
this.setState({names})
console.table(names)
}
render(){
return (
<ScrollView>
<View>
{
this.state.names.map((item) => (
<View style={styles.background}>
<Text style = {styles.title}>{item.name}</Text>
<CheckBox value={false} onChange={()=>this.checkboxTest(item.key)}/>
</View>
))
}
</View>
</ScrollView>
)
}
}

Answer 1

If you read the documentation carefully, you will noticed that this checkbox component requires a onClick function, which you did not provide. Hence, instead of writing onChange, you should be using onClick instead
<CheckBox
style={{flex: 1, padding: 10}}
onClick={()=>{
this.setState({
isChecked:!this.state.isChecked
})
}}
isChecked={this.state.isChecked}
leftText={"CheckBox"}
/>

Answer 2

According to react-native-check-box documentation prop onClick is isRequired. But you are passing onChange not onClick.
Change your onChange to onClick in order to fix the error. Also change value to isChecked.
<CheckBox isChecked={false} onClick={()=>this.checkboxTest(item.key)}/>
Edit
Check below complete example for information
import * as React from "react";
import { Text, View } from "react-native";
import CheckBox from "react-native-check-box";
export default class List extends React.Component {
constructor(props) {
super(props);
this.state = {
names: [
{
key: 0,
name: "Element1",
isChecked: false
},
{
key: 1,
name: "Element2",
isChecked: false
}
]
};
}
checkboxTest = key => {
let names = this.state.names.reduce((acc, name) => {
if (name.key === key) {
acc.push({ ...name, isChecked: !name.isChecked });
} else {
acc.push(name);
}
return acc;
}, []);
this.setState({ names });
};
render() {
return (
<View>
{this.state.names.map((item, index) => (
<View style={{ flexDirection: " row" }}>
<Text>{item.name}</Text>
<CheckBox
isChecked={
this.state.names.find(item => item.key == index).isChecked
}
onClick={() => this.checkboxTest(item.key)}
/>
</View>
))}
</View>
);
}
}
Hope this helps you. Feel free for doubts.