Well, I'm pretty new with React Native and I'm trying to update a child component on his Parent, the thing is that I'm giving this error (Warning: Cannot update a component from inside the function body of a different component.) and I don't know what to do.
https://imgur.com/a/1LhMsfY -> The father component.
const CallList: React.FC<NavigationProps> = (props) => { const [absences, setAbsences] = useState<Array<Array<{ id: number, checked: boolean }>>>([]); // const [absences, setAbsences] = useState([{'id': 0, 'checked': false},{'id': 1, 'checked': false}]); const { setOptions } = useNavigation(); const {aula} = props.route.params; const [students, setStudents] = useState<Array<StudentProps>>([]); const [loading, setLoading] = useState<boolean>(false); const {signOut, docente, anoSemMat} = useAuth();
https://imgur.com/a/FMe98UQ -> That's the place where I call the Child Component (StudentsList)
if (loading || absences.length == 0 || students.length == 0) return <Loading/>; else { return (<><ScrollView style={styles.scrollView} contentContainerStyle={{ flexGrow: 1, marginTop: 30}}><SafeAreaView><TouchableWithoutFeedback onPress={Keyboard.dismiss}><KeyboardAvoidingView behavior = "position"><View style={styles.container}> {students.map((student, idx) => { return <StudentsList key={student.NRO_ALUNO} student={student} value={absences[idx]} onChange={(classes, nroAluno) => setAbsences(changeAbsenceStudent(classes, nroAluno))} // onChange={(classes, nroAluno) => setAbsences(classes)} /> })}<Button onPress={() => console.log(absences)} title="click"/></View></KeyboardAvoidingView></TouchableWithoutFeedback></SafeAreaView></ScrollView></> ); }
https://imgur.com/a/mZFKLiB -> The Child Component
interface Students { student: StudentsListProps; onChange: (classes: Array<{ id: number, checked: boolean }>, pos: number) => void; value: Array<{ id: number, checked: boolean }>}interface StudentsState { isVisible: boolean, checkAll: boolean, classes: Array<{ id: number, checked: boolean }>, student: StudentsListProps}export default class StudentsList extends React.Component<Students, StudentsState> { constructor(props : Students) { super(props) const { student, value } = this.props; this.state = { isVisible: false, checkAll: false, classes: value, student: student } }
All I need is to get the value from StudentsList on CallList but I don't know the best way to do that so I made this "onChange" in StudentsList.