I'm trying to pass data I got from the child component to the parent component.

I keep on getting an error saying "Attempted to assign to readyonly property."

TypeError: Attempted to assign to readonly property.
at node_modules\react-native\Libraries\LogBox\LogBox.js:149:8 in registerError
at node_modules\react-native\Libraries\LogBox\LogBox.js:60:8 in errorImpl
at node_modules\react-native\Libraries\LogBox\LogBox.js:34:4 in console.error
at node_modules\expo\build\environment\react-native-logs.fx.js:27:4 in error
at node_modules\react-native\Libraries\Core\ExceptionsManager.js:104:6 in reportException       
at node_modules\react-native\Libraries\Core\ExceptionsManager.js:172:19 in handleException      
at node_modules\react-native\Libraries\Core\setUpErrorHandling.js:24:6 in handleError
at node_modules\expo-error-recovery\build\ErrorRecovery.fx.js:12:21 in ErrorUtils.setGlobalHandler$argument_0
at node_modules\regenerator-runtime\runtime.js:63:36 in tryCatch
at node_modules\regenerator-runtime\runtime.js:294:29 in invoke
at node_modules\regenerator-runtime\runtime.js:63:36 in tryCatch
at node_modules\regenerator-runtime\runtime.js:155:27 in invoke
at node_modules\regenerator-runtime\runtime.js:165:18 in PromiseImpl.resolve.then$argument_0    
at node_modules\react-native\node_modules\promise\setimmediate\core.js:37:13 in tryCallOne      
at node_modules\react-native\node_modules\promise\setimmediate\core.js:123:24 in setImmediate$argument_0
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:123:14 in _callTimer
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:177:14 in _callImmediatesPass    
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:437:30 in callImmediates
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:388:6 in __callImmediates  
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:132:6 in __guard$argument_0at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:365:10 in __guard
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:131:4 in flushedQueue

  

I have a radio button on my child component, and I want it's value to go back to the parent component since that data will be used in the parent component.

child radio handle (OrderCard.js):

const handleRadio = (value) => {
    console.log(value)
    setRadioValue(value)
    if(value === true) {
        props.onChange = true
    } else if (value === false) {
        props.onChange = false
    }
}

on the parent I mapped the component since it is like a card with buttons,

                        {orders.map((order, index) => {
                        return (
                            <OrderCard 
                                orderNum={order.order_name} 
                                items={order.order_items} 
                                key={index} 
                                count={index}
                                onChange={(value) => accepted(value)}
                            />
                        )
                    })}

and the accepted function, tried to make it appear in console:

    const accepted = (data) => {
    console.log('data: ', data)
    }

full code below

parent:

import { Box, Button, Center, Heading, HStack, Text, VStack, Flex, View, ScrollView, Spinner } from 'native-base';
import React, { useState, useEffect } from 'react';
import { StyleSheet } from 'react-native';
import { OrderCard } from '../../components/scanners/batch/assemblyList/OrderCard';
import AsyncStorage from '@react-native-async-storage/async-storage';
import axios from 'axios';

const BatchAssemblyList = ({ route, navigation }) => {

const { batchNumber } = route.params;
const batchNum = batchNumber;
// console.log(batchNum)
const token = AsyncStorage.getItem('token');

const [ isLoading, setIsLoading ] = useState(true);
const [ orders, setOrders ] = useState([]);
const [ accepted, setAccepted ] = useState(null);

const getOrders = async () => {

    let config = {
        headers: {
            'Authorization': 'Bearer '   token
        }
    }

    let payload = {
        batch_no: batchNum
    }

    await axios.post(`someapi`, payload, config)
            .then(res => {
                console.log(res.data)
                setOrders(res.data)
                setIsLoading(false)
            })
            .catch(err => {
                console.log(err)
            })
}

useEffect(() => {
    getOrders();
}, []);

useEffect(() => {
    console.log(accepted)
}, [accepted]);

if (isLoading) {
    return (
        <View flex='1' bgColor='#FFEFF0'>
            <VStack>
                <Flex direction='row' style={styles.header}>
                    <HStack flex='1' flexDirection='row' justifyContent='flex-start'>
                        <Heading size='sm' marginLeft='2' alignSelf='center'>Batch {batchNum}</Heading>
                    </HStack>
                </Flex>
            </VStack>
            <VStack justifyContent="center" alignItems="center">
                <Center>
                    <Spinner size='lg' color='indigo.500' accessibilityLabel="Loading orders" />
                    <Heading color='indigo.500' fontSize="md">