Flat list not being rendered in react native - reactjs

Question

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

Answer 1

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>
)
}