react with ts - check if props empty inside map view.tsx-CodePudding

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";

tableSelected?.id

Pick your posion