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
CodePudding user response:
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}/>);
}