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
Advertisement
Answer
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(); } } />