How to split a string into two and output them as two different blocks?

There is a React component –

‘function Product (props) {

const {
    prod_id: id,
    prod_name : title,
    prod_status: status,
    prod_price: price,
    prod_oldprice : oldPrice,
} = props;


let oldPriceChecker = (oldPriceValue) => {
    if (oldPriceValue) {
        let oldPriceStr = oldPriceValue + ' zł';
        return(oldPriceStr);
    }else {
        return('');
    }
}


let statusChecker = (value) => {
    if (value != undefined){
    let string = value;
    let array = string.split(',');
    console.log(array);
    array.map(n => <div className="status">{n}</div>)
    }
}



return (

<div className="row">
  <div className="card">
    <div className="card-image">
      <img src="https://via.placeholder.com/150" />
    </div>
    <div className="card-content">
        <span className="card-title">{title}</span>
        <hr className="card_hr" />
        <p className="card_price" >{price} zł</p>
        <div className="card_price old_price">{oldPriceChecker(oldPrice)}</div>
        {statusChecker(status)}
    </div>
  </div>

   ) 

}

export {Product}

Question: The variable prod_status: status can contain several values (for example, “new,promotion”, if so, you need to split it into two words and create a separate block for each, since now the block comes with the whole line

It is necessary like this (new, saleout, etc. in separate blocks)

I tried to create a function but it just outputs an array to the console

I think I’m not using the property “map” correctly

Answer

The problem:

The function you have created statusChecker does not return anything. Therefore when you want to print it ({statusChecker(status)}) it doesn’t do anything.

let statusChecker = (value) => {
    if (value != undefined){
      let string = value;
      let array = string.split(',');
      console.log(array);

      //This is what you want to return but is not returned
      array.map(n => <div className="status">{n}</div>)
    }
}

Solution:

return the mapped array from the function.

let statusChecker = (value) => {
    if (value != undefined){
      let string = value;
      let array = string.split(',');
      console.log(array);

      //This is what you want to return but is not returned
      return array.map(n => <div className="status">{n}</div>)
    }
}