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 >
            )
        },
        ...
    ])
}

CodePudding user response：

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 >
            )
        },
        ...
    ])
}