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

Question

JavaScript

There is a 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('');
            }
        }
    
    
        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>
                <div className="status">{status}</div>
            </div>
          </div>
      </div>
        ) 
    }

export {Product}

The data comes from this file .

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 whole line comes in the block.

Now the site looks like this (new,saleout) in one block:



You need this (new,saleout, etc. in separate blocks):

Answer 1

Instead let it be<div className="status">{status}</div>

{status.split(',').map(n => <div className="status">{n}</div>)}