The props -
interface Props {
readonly historicPrices: IHistoricPrices[] | null;
readonly historicPricesChangeHandler: (value: IHistoricPrices[] | null) => void;
}
The view.tsx code -
<div className={classes['innerContainer']}>
{props.historicPrices?.map((price, idx) => {
return (
<li className={classes['innerContainer__text']} key={idx}>
{t(`historicPrices.currency.${currency}`)}
{price.price}
{t('historicPrices.date')}
{price.createdAt}
</li>
)
})}
</div>
How can i display a message if the array is returning nothing
CodePudding user response:
Use &&
. With &&
operator, second expression is only run when first is true.
{props.historicPrices.length === 0 && <p>Alert</p> }
If you conditionally want to show one or the other you can use ?
conditional operator:
{props.historicPrices.length === 0 ? <p>Alert</p> : props.historicPrices?.map((price, idx) => {
return (
<li className={classes['innerContainer__text']} key={idx}>
{t(`historicPrices.currency.${currency}`)}
{price.price}
{t('historicPrices.date')}
{price.createdAt}
</li>
)
})}
Above code returns <p>
, when length is 0, otherwise the map function is run and that will be rendered.
CodePudding user response:
you should always do a state value with a default value.
const [array, setArray] = useState([]);
for the undefined properties of an object, you have two options in this case:
const value = prop.value ? prop.value : "some default value";
or
tableSelected?.id
Pick your posion