react with TS - displaying an array with map-CodePudding

Here is the view.tsx -

    <div className={classes['innerContainer']}>
      <div>
        {props.historicPrices?.map((price) => {
          <span className={classes['innerContainer__text']}>
            {t('historicPrices.currency.BTCUSD')}
            {price.price}
            {t('historicPrices.date')} 
          </span>
        })}
        Oct 18 2021, 14:32
      </div>
    </div>

SCSS -

.innerContainer {
  &__text {
    font-size: 2.1rem;
    font-weight: 700;
  }
}

I don't get anything in the UI, what is the problem with the code?

CodePudding user response：

You forgot to use return. It has two different uses;

<div className={classes['innerContainer']}>
  <div>
    {props.historicPrices?.map((price) => (
      <span className={classes['innerContainer__text']}>
        {t('historicPrices.currency.BTCUSD')}
         {price.price}
        {t('historicPrices.date')} 
      </span>
    ))}
    Oct 18 2021, 14:32
  </div>
</div>

<div className={classes['innerContainer']}>
  <div>
    {props.historicPrices?.map((price) => {
      return (
        <span className={classes['innerContainer__text']}>
          {t('historicPrices.currency.BTCUSD')}
          {price.price}
          {t('historicPrices.date')} 
        </span>
      )
    })}
    Oct 18 2021, 14:32
  </div>
</div>