REACT- How can I put a dash (-) inmy empty cell with my condition?-CodePudding

How can I do to get a dash (-) if I have no animals printed in my table cell. With What I've tried, my cell remains empty if I have animals:[]:

export default function Animals() {
    const data = useMemo(() => [
        {
            Header: 'Animals',
            accessor: (row) => row.animals,
            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>Type: {o.type}</p>
                            <p>Price: {o.price}</p>
                        </span>
                    ))
                        : ''
                    } />}
                </div >
            )
        }
....
}

CodePudding user response：

use inline ternary condition logic

export default function Animals() {
    const data = useMemo(() => [
        {
            Header: 'Animals',
            accessor: (row) => row.animals,
            Cell: (props) => (
{ props.value !== [] && props.value.length > 0 ?              
<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>Type: {o.type}</p>
                            <p>Price: {o.price}</p>
                        </span>
                    ))
                        : ''
                    } />}
                </div > : <div>-</div> }
            )
        }
....
}