render(){ return( <View style={styles.container}> {this.summary} <Autocomplete placeholder = "Enter student name or roll number" data={this.state.data} onChangeText={text => this.filterData(text)} renderItem={data => ( <TouchableOpacity onPress={() => this.onSelection(data) } > <Text style={styles.itemText}>{data.name}</Text> </TouchableOpacity> )} containerStyle={styles.autocompleteContainer} /> </View> ); }
render() { const { containerStyle, listStyle, autocompleteContainerStyle } = styles; const { query } = this.state; const data = this.findData(query); const comp = (a, b) => a.toLowerCase().trim() === b.toLowerCase().trim(); const { iconType } = this.props; return ( <View style={containerStyle}> <Icon name={iconType} /> <Autocomplete containerStyle={autocompleteContainerStyle} listContainerStyle={listStyle} listStyle={listStyle} data={data.length === 1 && comp(query, data[0].name) ? [] : data} defaultValue={query} onChangeText={text => this.setState({ query: text })} renderItem={item => ( <TouchableOpacity onPress={() => this.setState({ query: item.name })}> <Text>{item.name}</Text> </TouchableOpacity> )} /> {this.isInvalid()} </View> ); }