handle onValueChange of Child Component in Parent Component in React native

Question

I am modulating my Big component into small chunks. in Parent Component i've a lot of Switch and CheckbBox components.

Here it is

ParentComponent.js

<View style={styles.sliderContainer}>
                            <Text style={styles.sliderLabel}>Diettags:</Text>
                            <CheckBoxComponent label={'Sugarfree'} availableItems={13}/>
                            <CheckBoxComponent label={'Youth'} availableItems={11}/>
                            <CheckBoxComponent label={'Metabolites'} availableItems={10}/>
                            <CheckBoxComponent label={'Fodmap'} availableItems={7}/>
                        </View>

CheckBoxCompoenent.js

import React, {Component} from 'react'
import {Text, View, CheckBox, Switch, Platform,StyleSheet} from "react-native";
import PropTypes from 'prop-types'


class CheckBoxComponent extends Component {

    state={
        checked: true
    };

    render() {
        const { label,handleToggle,availableItems} = this.props;
        const {checked} = this.state;
        return (
            Platform.OS === 'ios' ?
                <View style={styles.mainContainer}>
                    <Text style={styles.label}>{`${label}(${availableItems})`}</Text>
                    <Switch value={checked}/>
                </View> :
                <View style={styles.mainContainer}>
                    <Text style={styles.label}>{`${label}(${availableItems})`}</Text>
                    <CheckBox value={checked} />
                </View>
        )


    }
}

const styles = StyleSheet.create({
   mainContainer: {
       flex: 1,
       justifyContent: 'space-between',
       alignItems: 'center',
       flexDirection: 'row',
       marginLeft: 20,
       marginRight: 20,
       marginTop: 10
   },
   label: {
       fontSize: 16,
   }
});

CheckBoxComponent.proptype = {
    label: PropTypes.string.isRequired,
    handleToggle: PropTypes.func.isRequired,
    availableItems: PropTypes.string
};

export default CheckBoxComponent

Now what i want

I want to handle onValueChange of Switch and Checkbox in my Parent Component

I have tried out all ways available on stackoverflow but but nothing helped me.

Someone please guide me through code how to solve this problem. ?

Thank you so much

Answer 1

What I am looking at is that you need to provide the function in child component and the state value using props.

//parent component:

 <View style={styles.sliderContainer}>
                    <Text style={styles.sliderLabel}>Diettags:</Text>
                    <CheckBoxComponent label={'Sugarfree'} availableItems={13} checked={this.state.checked} onValueChange={this.handleValueChange} />
                    <CheckBoxComponent label={'Youth'} availableItems={11}/>
                    <CheckBoxComponent label={'Metabolites'} availableItems={10}/>
                    <CheckBoxComponent label={'Fodmap'} availableItems={7}/>
                </View>

child component do this:

 const { label,handleToggle,availableItems,checked} = this.props;
    return (
        Platform.OS === 'ios' ?
            <View style={styles.mainContainer}>
                <Text style={styles.label}>{`${label}`} <Text style={{color: 'red'}}>({availableItems})</Text></Text>
                <Switch value={checked} onValueChange={(text) => this.props.onValueChange(text)}/>
            </View> :
            <View style={styles.mainContainer}>
                <Text style={styles.label}>{`${label}(${availableItems})`}</Text>
                <CheckBox value={checked} />
            </View>
    )


}

the above shall get you going and the rest is on you! you can finish it by using the good maping technique as been told by the first answer here by @auticcat.