Flat list not being rendered in react native-CodePudding

In my React native page
Im navigating from one page to another page with parameters

so those parameters has id which will be used to fetch data from endpoint and display that in flat list

function Assessments ({route,navigation}) {
  useEffect(()=>{
    fetchData(file)
  },[]);
  const { file } = route.params;
  const [data,setData] = useState([]);

file consists of route params(Id)

and fetchdata function triggers that function with the id and fetches data

  const fetchData = async (file) => {
    axios.get(`endpoint`)

      .then(function (response) {
        console.log(response.data)
        setData(response.data)
  


      })
      .catch(function (error) {
          console.log(error);
      })

  }

and im returning this

 return (

<View>
  <Text>okay</Text>


      <FlatList 
            flexGrow= {0}

            minHeight= '20%'
            maxHeight='80%'
      data={data}
      renderItem={showdata}>
      </FlatList>


      </View>
 )

and renderitem is

  const showdata = ({item}) => {
      <View>
        sdfdsfsdf
      </View>
    
  }

but that part isnt even being rendered

not sure where is the issue !

console.log()

{
    "id": 19,
    "name": "test1",


}

this is how the data from the endpoint is

CodePudding user response：

Your showdata is not returning anything. Please add return to it like this.

Here is the full code.

function Assessments ({route, navigation}) {
  const { file } = route.params;
  const [data, setData] = useState([]);

  useEffect(()=>{
    fetchData(file)
  },[]);

  const fetchData = async (file) => {
    axios.get(`endpoint`)
      .then(function (response) {
        console.log(response.data)
        setData(response.data)
      })
      .catch(function (error) {
        console.log(error);
      })
  }

  const showdata = ({ item }) => {
    //Add return here
    return (
      <View>
        <Text>
          sdfdsfsdf
        </Text>
      </View>
    )
  }

  return (
    <View>
      <Text>okay</Text>
      <FlatList 
        //Put all the style within style prop
        style={{flexGrow: 0, minHeight: '20%', maxHeight: '80%'}}
        data={data}
        renderItem={showdata}
      >
      </FlatList>
    </View>
  )

}