javascript - I got a problem with the render, can you explain to me please?

Question

I'm new on the language and i need to do something for friday, So there is my problem : /App.js: JSX value should be either an expression or a quoted JSX text (68:21)

And this is my whole code:

I tried multiple solution like with map, but i when i'm using map it's saying map isn't defined, i'm on it for now 2 days and i'm stuck on this..

import React, { Component, } from 'react';
import { 
  Text, View, StyleSheet, SafeAreaView, TextInput, FlatList, Keyboard, Image, ActivityIndicator 
  } from 'react-native';
import Constants from 'expo-constants';
import Icon from 'react-native-vector-icons/Ionicons';
import * as Animatable from 'react-native-animatable';

// You can import from local files
import AssetExample from './components/AssetExample';
import Users from './assets/Users.json';
// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';

const users = require('./assets/Users.json');

class App extends Component {

  constructor(props) {
    super(props);
    this.state = {
      searchKey : '',
    }
  } 

  state = {
    searchBarFocused: false
  }

  componentDidMount() {
  this.KeyboardDidShow = Keyboard.addListener('keyboardDidShow', this.KeyboardDidShow)
  this.KeyboardWillShow = Keyboard.addListener('keyboardWillShow', this.KeyboardWillShow)
  this.KeyboardWillHide = Keyboard.addListener('keyboardWillHide', this.KeyboardWillHide)
  }
  KeyboardDidShow = () => {
    this.setState({searchBarFocused: true})
  }

  KeyboardWillShow = () => {
    this.setState({searchBarFocused: true})
  }

  KeyboardWillHide = () => {
    this.setState({searchBarFocused: false})
  }


  render() {

    const filteredData = users.filter((item) => {
      return item.first_name.indexOf(this.state.searchKey) >= 0
    })

    return (
      <SafeAreaView style={{ flex: 1 }}>
        <View style={{ height: 80, backgroundColor: 'pink', justifyContent: "center", paddingHorizontal: 5 }}>
          <View style={{ height: 50, backgroundColor: 'white', flexDirection: "row", padding: 5, alignItems: "center"}}>
            <Animatable.View animation={this.state.searchBarFocused ? "fadeInLeft" : "fadeInRight"} duration={400}>
              <Icon name={this.state.searchBarFocused ? "md-arrow-back" : "ios-search"} style={{ fontSize: 24}}/>
            </Animatable.View>
            <TextInput placeholder='Search' style={{ fontSize: 24, marginLeft: 15, flex: 1 }} onChangeText={(value) => this.setState({searchKey : value})}
            />
          </View>
        </View>

        <FlatList
          style={{ backgroundColor: this.state.searchBarFocused? 'rgba(0,0,0,0.5)' : 'white', flex: 1 }}
        renderItem = ({filteredData, index}) => {
          return <Text>{filteredData.first_name}</Text>
        }
        keyExtractor={item => item.id}
        />
        </SafeAreaView>
      )
  }
}

export default App;

const styles = StyleSheet.create({

});

Answer 1

It seems you also forgot to pass data to FlatList:

        <FlatList
          style={{
            backgroundColor: this.state.searchBarFocused
              ? "rgba(0,0,0,0.5)"
              : "white",
            flex: 1,
          }}
          data={filteredData}
          renderItem={({ item, index }) => {
            return <Text>{item?.first_name}</Text>;
          }}
          keyExtractor={(item) => item.id}
        />