This is my card component. this card i want to call to main component

const CardQuestions = (props) => {
    const [value, setValue] = useState(0);

    return (
        <View style={styles.componentContainer}>

            <View style={styles.number}>
                <Text style={styles.h1}>{props.id}</Text>
            </View>
            <View style={styles.contentContainer}>
                <View style={styles.questionContainer}>
                    <Text style={styles.h1}>{props.title}</Text>
                </View>
                <View style={styles.sliderContainer}>
                    <View style={styles.titleSliderContainer}>
                        <Text style={styles.h3}>Tidak Penting</Text>
                        <Text style={styles.h3}>Penting</Text>
                    </View>
                    <View style={styles.slider}>
                        {/* Slider */}
                        <Slider
                            value={value}
                            step={1}
                            minimumValue={0}
                            maximumValue={100}
                            onValueChange={(val) => setValue(val)}
                            onSlidingComplete={() => props.getData(value),props.selectedId}
                            
                        />

                    </View>
                </View>
                <View style={styles.pointContainer}>
                    <View style={styles.inputPoint}>
                        <Text>{value}</Text>
                        {/* <TextInput

                            value={value}
                            onChangeText={val => setValue(0)}
                        // need handle ASYNCSTORAGE
                        /> */}
                    </View>
                    <TouchableOpacity onPress={() => setValue(0)}>
                        <Text style={styles.h2}>Clear</Text>
                    </TouchableOpacity>
                </View>
            </View>
        </View>
    );
};

and this is my main component

<View>
      <View style={styles.container}>
        <FlatList
          keyExtractor={(item) => item.id}
          data={data}
          renderItem={({ item, index }) => {

            const getData = (val) => {
              setHasil(val)
            }
            console.log(selectedId)
            return (
              <ScrollView style={styles.contentScoringContainer} >
                <CardQuestions getData={getData} id={item.id} title={item.title} value={item.value} selectedId={() => setSelectedId(item.id)} />
              </ScrollView>
            )
          }}
          extraData={selectedId} />
      </View>

in here i want to call props.getData(value) and props.selectedId but just one of these can be use onSlidingComplete. If someone can help me, its so helpfull to me for finish my project

CodePudding user response：

This is what you're looking for.

 <Slider
   value={value}
   step={1}
   minimumValue={0}
   maximumValue={100}
   onValueChange={(val) => setValue(val)}
   onSlidingComplete={() => {
     props.getData(value);
     props.selectedId();
     }
   }
 />