Added search to clubs.js

app/Clubs.js

@@ -17,9 +17,10 @@ import {
   DebugInstructions,
   ReloadInstructions,
 } from 'react-native/Libraries/NewAppScreen';
+import { SearchBar } from 'react-native-elements';
 
 const ClubElement = ({item}) => {
-  console.log(item)
+  //console.log(item)
   return(
   <View style={styles.item}>
     <Text style={styles.title}>{item.item.name}</Text>
@@ -28,18 +29,22 @@ const ClubElement = ({item}) => {
   )
 }
 class Clubs extends React.Component {
+
   
 	constructor(props) {
     super(props);
 
     this.state = {
       data: [],
-      isLoading: true
+      dataSearch:[],
+      isLoading: true,
+      search:""
     };
   }
 
   componentDidMount() {
-    fetch('https://84a7c514cb57.ngrok.io/api/en/clubs',{
+    
+    fetch('https://6dc2642ae9b3.ngrok.io/api/en/clubs',{
       headers: {
         'Cache-Control': 'no-cache'
       } })
@@ -48,22 +53,41 @@ class Clubs extends React.Component {
         return response.text();
       })
       .then((json) => {
-        console.log(json);
-        this.setState({ data: JSON.parse(json) });
+        //onsole.log("done bitch?")
+        //console.log(json);
+        this.setState({data: JSON.parse(json)});
+        this.setState({dataSearch:JSON.parse(json)});
       })
       .catch((error) => console.error(error))
       .finally(() => {
         this.setState({ isLoading: false });
       });
+      
+  }
+  updateSearch = (search) => {
+    this.setState({ search:search });
+    ds = this.state.dataSearch.filter((thing)=>{return thing.name.startsWith(search)})
+    this.setState({dataSearch: ds})
+  };
+  clearSearch  = (search)=>{
+    ds = this.state.data;
+    this.setState({dataSearch:ds})
   }
-
   render() {
-    const { data, isLoading} = this.state;
+    const { data , dataSearch, isLoading,search} = this.state;
 
     return (
+      
+
       <SafeAreaView style={styles.container}>
+        <SearchBar
+        lightTheme
+        placeholder="Type Here..."
+        onChangeText={this.updateSearch}
+        onClear={this.clearSearch}
+        value={this.state.search}/>
       <FlatList
-        data={data}
+        data={dataSearch}
         renderItem={item => <ClubElement item={item}/>}
         keyExtractor={item => JSON.stringify(item)}
       />