How can I do to not display my InfoIcon if other:[]. Indeed, when I want to display all my data in a Table, I have an empty other members (logic since I don’t have other people) but the icon is displayed. How can I do to remove this icon if other:[] please ?
{
"participation": [
{
"family": [
{
"name": "Huston",
"age": "23"
}
],
"other": [
{
"name": "Luk",
"age": "65"
},
]
},
{
"family": [
{
"name": "Laurence",
"age": "5"
}
],
"other": []
}
]
}
export default function App() {
const data = useMemo(() => [
{
Header: 'Other',
accessor: (row) => row.other,
Cell: (props) => (
<div>
{props.value !== [] ? props.value.map(({ name }) => name).join(", ") : ''}
<InfoIcon position="right" message={props.value !== [] ? props.value.map((o) => (
<span key={o.name}>
<b>{o.name}</b>
<p>Age: {o.age}</p>
</span>
))
: ''
} />
</div >
)
},
...
])
}
>Solution :
If I understood your ask, you can check if props.value.length is greater than 0 before call InfoIcon, like this:
export default function App() {
const data = useMemo(() => [
{
Header: 'Other',
accessor: (row) => row.other,
Cell: (props) => (
<div>
{props.value !== [] ? props.value.map(({ name }) => name).join(", ") : ''}
{props.value.length > 0 && <InfoIcon position="right" message={props.value !== [] ? props.value.map((o) => (
<span key={o.name}>
<b>{o.name}</b>
<p>Age: {o.age}</p>
</span>
))
: ''
} />}
</div >
)
},
...
])
}