React Native Search using SectionList - react-native

Question

I created a SectionList and tried to implement a search filter for my SectionList. But my output got an error. I took a screenshot of it below. I don't know what's wrong.
This is my component.
export default class Cluster1 extends Component{
constructor(props){
super(props)
this.state = {
dataToShow: '',
search: false
}
}
searchUpdated = (term) => {
let matchedItemsArray = []
if(term === ''){
this.setState({search: false, dataToShow: ClusterData})
}else{
this.state.dataToShow.map((item) => {
if(item.title.includes(term)){
matchedItemsArray.push(item)
}
})
this.setState({search: true, dataToShow: matchedItemsArray})
}
}
searchUpdated = (input) => {
let userInput =[]
if(input === ''){
this.setState({search: false})
userInput = ''
}else{
this.setState({search: true})
}
}
render(){
return(
<View style={styles.container}>
<TextInput
onChangeText={(term) => { this.searchUpdated(text) }}
style={styles.searchInput}
placeholder="Type a mood to search"
/>
<SectionList
renderItem = {({item, index}) =>
<SectionListItem item = {item} index = {index}/>}
renderSectionHeader = {({section}) =>
<SectionHeader
sections={this.searchUpdated()}
keyExtractor = {(item) => item.name}/>}>
</SectionList> </View>
);
}}
class SectionHeader extends Component {
render() {
return (
<View style={styles.header}>
<Text style={styles.headertext}>
{this.props.section.title}
</Text>
<TouchableOpacity onPress={ () => Actions.SongList({ section: this.props.section}) }>
<Text style ={styles.Play}> Play
</Text>
</TouchableOpacity>
</View>
); }
}
class SectionListItem extends Component{
render(){
return(
<View>
<Text style={styles.moodname}>{this.props.item.name}</Text>
</View>
);
}}
This is my data
const ClusterData = [
{ title: 'Cluster1',
data:
[
{name: 'passionate'},{name: 'rousing'},{name: 'confident'},
{name: 'boisterous'},{name: 'rowdy'}],
},
{
title: 'Cluster2',
data:
[
{name: 'rollicking'},{name: 'cheerful'{name: 'fun'},{name: 'sweet'},
{name: 'amiable'},{name: 'natured'}],

Answer 1

Here is a simple search filter:
I added a search state to help determine whether the user is currently searching or not.
constructor(props){
super(props)
this.state = {
dataToShow: '',
search: false
}
}
Then, we create the search function.
searchUpdated = (term) => {
let matchedItemsArray = []
if(term === ''){
this.setState({search: false, dataToShow: ClusterData})
}else{
this.state.dataToShow.map((item) => {
if(item.title.includes(term)){
matchedItemsArray.push(item)
}
})
this.setState({search: true, dataToShow: matchedItemsArray})
}
}
When the input is '', the search state is false. Otherwise, the function will map through the dataToShow array to find if any section titles include the user's input.
Alternatively, I like to use a lodash filter instead for it's simplicity.
First, we declare a constant called userInput:
let userInput
Then, we create a function to determine whether the userInput is empty or not to set the search state. (Remember to keep this.state.search that we created in the first place)
searchUpdated = (input) => {
if(input === ''){
this.setState({search: false})
userInput = ''
}else{
this.setState({search: true})
}
}
Finally, in our SectionList we use the lodash filter to help filter for the right section header names:
<SectionList
renderItem = {({item, index}) =>
<SectionListItem item = {item} index = {index}/>}
renderSectionHeader = {({section}) =>
<SectionHeader
section = {section}
sections = {
this.state.search ?
_.filter(this.state.dataToShow, function(item){
return item.title.includes(userInput)})
: this.state.dataToShow}
keyExtractor = {(item) => item.name}/>}>
</SectionList>
The entire component
import React from 'react'
import { View, Text, SectionList, TouchableOpacity, TextInput } from 'react-native'
const ClusterData = [
{title: 'Cluster1', data: [{name: 'passionate'},{name: 'rousing'},{name: 'confident'},{name: 'boisterous'},{name: 'rowdy'}]},
{title: 'Cluster2', data: [{name: 'rollicking'},{name: 'cheerful'},{name: 'fun'},{name: 'sweet'},{name: 'amiable'},{name: 'natured'}]}
]
let userInput = ''
export default class TempScreen extends React.Component {
constructor(props){
super(props)
this.state = {
search: false,
dataToShow: []
}
}
componentWillMount(){
this.setState({dataToShow: ClusterData})
}
searchUpdated = (term) => {
let matchedItemsArray = []
if(term === ''){
this.setState({search: false, dataToShow: ClusterData})
}else{
this.setState({search:true, dataToShow: ClusterData}, function(){
this.state.dataToShow.map((item) => {
if(item.title.includes(term)){
matchedItemsArray.push(item)
}
})
this.setState({dataToShow:matchedItemsArray})
})
}
}
render () {
return (
<View>
<TextInput
onChangeText={(term) => {this.searchUpdated(term)}}
style={styles.searchInput}
placeholder="Type a mood to search"/>
<SectionList
renderItem={({item}) => <SectionListItem itemName = {item.name}/>}
renderSectionHeader={({section}) => <SectionHeader sectionTitle = {section.title}/>}
sections={this.state.dataToShow}
/>
</View>
)
}
}
class SectionHeader extends React.Component{
render(){
return(
<View>
<Text>{this.props.sectionTitle}</Text>
<TouchableOpacity>
<Text>Play</Text>
</TouchableOpacity>
</View>
)
}
}
class SectionListItem extends React.Component{
render(){
return(
<View>
<Text>{this.props.itemName}</Text>
</View>
)
}
}