How to update checkbox appearance or state in child - react-native

Question

I have searched about but not found a solution (I'm a beginner, so...) despite a few posts such as:
Use modal to take user checkbox input and return data back to parent component
I have a parent with a number of checkboxes. Depending on the state of a switch I insert either child1 or child2 into the parent.
Each child has 4-5 checkboxes, not just one.
I have figured out that the best way (for me) is to have the state for the checkbox values and the checkbox visual state (as in a showing as checked or unchecked) should be handled in the parent with props. I don't want to use redux.
I am having issue with the checkbox not showing as checked in the child, even though the value is being passed back. I had a toggle function in each child but that just meant that while it worked, it was one step behind, showing unchecked when checked and vice versa.
My parent:
import React, { Component } from "react";
import { StyleSheet, Text, View, Image, ImageBackground, ScrollView, Switch, Platform } from "react-native";
import CircleCheckBox, { LABEL_POSITION } from "react-native-circle-checkbox";
import Child1 from "../components/Child1";
import Child2 from "../components/Child2";
// Function called when checkbox is toggled
onchange(checkedBoxName, value){
if(this.state[checkedBoxName]==false){
this.setState({
[checkedBoxName]: true,
})
Let myResult = null,
// Do math and stuff with the value argument and set outputText
this.setState({outputText: myResult});
}
class ParentScreen extends Component {
constructor(props) {
super(props);
this.state = {
outputText: "",
///checkbox states that are in the parent here
//followed by states for child1 checkbox
Checked10: false,
Checked11: false,
Checked12: false,
Checked13: false,
// then child2 checkboxes
Checked14: false,
Checked15: false,
Checked16: false,
Checked17: false,
}
render(){
return(
// bunch of views and checkboxes etc in the parent like this:
<View style={[styles.checkbox, styles.checkbox2]} >
<CircleCheckBox outerSize={28} filterSize={26} innerSize={14}
outerColor={"#ff0000"} filterColor={"#FFF"} innerColor={"#ff0000"}
style={styles.checkbox} checked={this.state.checked1} onToggle={(checked) => this.onchange("checked1", 1)} />
</View>
// etc
// Then choosing and displaying my child component:
<View>
{switchChild ? <Child1 changeChild1 ={this.onchange.bind(this)} /> : <Child2 changeChild2 ={this.onchange.bind(this)} />}
</View>
);
}
Then in my child component:
import React, { Component } from "react";
import { View, Text, StyleSheet, Image } from "react-native";
import CircleCheckBox, {LABEL_POSITION} from "react-native-circle-checkbox";
class PL extends Component {
// no checkbox states here
render() {
return(
<View style={[styles.checkbox, styles.checkbox2]} >
<CircleCheckBox outerSize={28} filterSize={26} innerSize={14} outerColor={"#ff0000"} filterColor={"#FFF"} innerColor={"#ff0000"} style={styles.checkbox} checked={this.state.checked10} onToggle={(checked) => { this.props.changeChild1("checked10", 10) }} />
</View>
<View style={[styles.checkbox, styles.checkbox2]} >
<CircleCheckBox outerSize={28} filterSize={26} innerSize={14} outerColor={"#ff0000"} filterColor={"#FFF"} innerColor={"#ff0000"} style={styles.checkbox} checked={this.state.checked11} onToggle={(checked) => { this.props.changeChild1("checked11", 11) }} />
</View>
<View style={[styles.checkbox, styles.checkbox2]} >
<CircleCheckBox outerSize={28} filterSize={26} innerSize={14}
outerColor={"#ff0000"} filterColor={"#FFF"} innerColor={"#ff0000"} style={styles.checkbox} checked={this.state.checked12} onToggle= {(checked) => { this.props.changeChild1("checked12", 12) }} />
</View>
//etc
);
}
}
So, what I need is a way to show that each child checkbox is checked when it's clicked, particularly when there are multiple checkboxes in the child. Since it's more than one checkbox, I can't just hard code in a particular state. I assume I use a variable in the "checked={this.state.checked11}" line (like: checked={this.state[aVarWithCheckboxName]} or maybe there is another way to do this?
Will this need to pass multiple functions to work?

Answer 1

Ok. So after a lot more reading and pulling out bits here and there, I fixed the problem. But I think it might be a bit of overkill so would like to hear how to avoid sending the whole state to the child, and just send, or reference to, a collection of state items.
Got rid of all state in child components. State for all checkboxes were put into the parent along with all of the functions that processed the data.
Parent:
Did not need ".bind(this)" thanks to ES6.
<View>
{switchChild ? <Child1 changeChild1 ={this.onchange} {...this.state} /> : <Child2 changeChild2 ={this.onchange} {...this.state} />}
</View>
Child:
<View style={[styles.checkbox, styles.checkbox2]} >
<CircleCheckBox //all the styling goes here
checked={this.props.checked10} onToggle={(checked) => { this.props.changeChild1("checked10", 10) }} /> }} />
</View>
So now no matter how many checkboxes I have, I can access the parent state with the individual name of the checkbox. Sending back the data to run the onchange function remains the same.
If there is a better way of handling this (targeting the checked item in the parent state), let me know.