create FlatList item. but it doesn't work on react native

Question

Why is FlatList not working?

I am trying to get data from my API and view by FlatList but it is not working. I can see those values in the console, but not in the FlatList .

 **Home Page** import React, { Component } from 'react' import {Text,TouchableOpacity,View,FlatList} from 'react-native' import { connect } from 'react-redux' //import {VIEWDATA } from '../../src/action/type'; //import ViewData from '../../src/action/index' import dataFetch from '../../src/action/index' class AllData extends Component{ constructor(){ super() this.state={ values: [], b: [{id:1,name:'Turag'},{id:2,name:'Shagor'}], c:'av' } } static getDerivedStateFromProps(props, state) { return{ values: props.val } } componentDidMount() { this.props.abc //this.setState({values: this.props.val}) } shouldComponentUpdate() { return true; } render(){ return( <View> <Text>View All Datas</Text> <FlatList data={this.state.b} renderItem={(i)=>{ <View> <Text>{i.name}</Text> </View> {console.log(i.name)} }} keyExtractor={(item) => item.id} /> <TouchableOpacity onPress={this.props.abc} > <Text>Submit</Text> </TouchableOpacity> </View> ) } } const mapStateToProps = (state)=>{ return{ val: state.arrayData } } const mapDispatchToProps = dispatch =>{ return ({ abc: () => {dispatch(dataFetch())} }) } export default connect(mapStateToProps,mapDispatchToProps)(AllData)

Answer 1

The way you are using render item is wrong.

   renderItem={({item})=>{
           {console.log(item.name)}
            return (<View><Text>{item.name}</Text></View>)
    }}

Render item gets many parameters and to get the item you will have to use {item} which will give your access to the current item.

Also you are not returning anything from your function to render, The above code fixes the issues you have.

Answer 2

You need to return what you want to display on JSX

renderItem={(i)=>{
               return ( 
                     <View>  
                          <Text>{i.name}</Text> 
                     </View>
                     );
            }}