2

Multiple photos from the device camera are being selected and passed to a flatlist component, and i have textinput at the bottom which lets text be added underneath each photo. I want to get the index of the text input passed as props but it says can't find variable index.

Code:

const Flatlistitems = (props) => {
return(
<FlatList
        style={{
            flexDirection: 'row',
            marginRight: 10,
            marginLeft: 5,
            flex: 1,
        }}
        data={props.data}
        horizontal={true}
        pagingEnabled={true}
        snapToInterval={CARD_WIDTH}
        scrollEventThrottle={16}
        showsHorizontalScrollIndicator={false}
        decelerationRate={'fast'}
        snapToAlignment={'start'}
        contentContainerStyle={{ justifyContent: 'center', Flex: 1 }}
        keyExtractor={(item, index) => index.toString()}
        renderItem={({ item, index }) => (
            <View
                style={{
                    justifyContent: 'center',
                    marginRight: 10,
                    marginLeft: 30,
                    alignContent: 'space-around',
                    Flex: 1,
                }}
                key={index}
            >
                <Image
                    source={item}
                    style={{
                        height: height / 3.1,
                        width: CARD_WIDTH,
                        backgroundColor: 'gray',
                    }}
                />
                <View style={{ flex: 1 }}>
                    <TextInput
                        maxLength={100}
                        autoFocus={true}
                        contextMenuHidden={true}
                        underlineColorAndroid="transparent"
                        returnKeyType="next"
                        textAlignVertical={'top'}
                        style={{
                            borderColor: 'black',
                            borderBottomWidth: StyleSheet.hairlineWidth,
                            height: 40,
                            color: 'black',
                            width: CARD_WIDTH,
                        }}
                        multiline={false}
                        numberOfLines={1}
                        placeholder="Add a caption"
                        placeholderTextColor="black"
                        onChangeText={props.onChangeText.bind(null, index)}
                        value={props.value.bind(null, index)}
                    />
                </View>
            </View>
        )}
    />
)
}

Also tried this :

onChangeText={props.onChangeText[index]}
value={props.value[index]}

Usage:

<Flatlistitems
    data={photos}
    onChangeText={(text) => {
    textInputs = text;
    this.setState({
    textInputs,
    });
    }}
    value={textInputs}
/>
endlessCode
  • 1,255
  • 4
  • 21
  • 36
  • haved you tried props.onChangeText(index)? – cuongtd Jul 16 '19 at 01:18
  • You can create a closure as on change event handler so that you can have `index` in scope and then call `props.onChangeText` like so `onChangeText={ (text) => { props.onChangeText(text,index)} }`. This allows you to pass text & index to your callback. – Amar Jul 16 '19 at 06:49
  • @Amar it kind of worked, i chnaged to this...... onChangeText={ (text) => { props.onChangeText(text,index)} } value={ (text ) => props.value(text, index)}. How do i used it correctly? Because i keep getting textinputs is read only. Textinputs is my state value – endlessCode Jul 16 '19 at 14:20

0 Answers0