Show Icon instead of integers, react native data

Question

I want to change how the API data appear so that instead of showing the numbers, It will show the icon instead

const tableData = {
  tableHead: [//head data],
};

const result = data?.data?.items.map((data) => {
  const newArr = [];

  const signalIcon= () => {
    if (Object.values(data.fields.signal) === 0){
      return ( <Icon name="md-aperture" color={'#00FF00'} size={10}/>);
    } return (<Icon name="ios-home" color={'#00FF00'} size={10}/>);
  }

  const lightIcon= () => {
    if (Object.values(data.fields.light) == 0){
      return (<Icon name="ios-home" color={'#00FF00'} size={10}/>);
    } return (<Icon name="md-aperture" color={'#00FF00'} size={10}/>);
  }

   newArr.push(data.id)
   newArr.push(data.fields.name)
   newArr.push(signalIcon)
   newArr.push(lightIcon)

  return newArr
  });

return (
<View>
<Table>
<Row
 data={tableData.tableHead} />
<Rows
 data ={result} />
</Table>
</View>

but whenever I run it, the rows for both signal and light would not show anything

Answer 1

Instead of returning a function, you can use it as a variable like this

const signalIcon = {
    if (Object.values(data.fields.signal) === 0) {
      return ( <Icon name="md-aperture" color={'#00FF00'} size={10}/>);
    }
    return (<Icon name="ios-home" color={'#00FF00'} size={10}/>);
}

const lightIcon = {
    if (Object.values(data.fields.light) === 0) {
      return (<Icon name="ios-home" color={'#00FF00'} size={10}/>);
     }
    return (<Icon name="md-aperture" color={'#00FF00'} size={10}/>);
}