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

CodePudding user response：

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>)
    }
}

CodePudding user response：

The main problem with your code is that you are trying to create an html element just by writing it, and that is not possible. The closest thing to that is for you to use innerHTML. for example: parent.innerHTML = <div className="status">${n}</div>. being "parent" an html element previously created (document.createEement()) or already existing in the DOM.

In my solution I used document.createElement() to create a div and insert the text into it. The function returns an array with the div elements and their respective words inside but only that, it doesn't print anything on the screen. If all you want is to display it on the screen the process is a bit different.

let statusChecker = (value) => {
// Instead of doing " if (value != undefined) I used 
    let nodes = value?.split(',').map(n => {
    
       // first you have to create an element
       let div = document.createElement('div')
       // add the class status
       div.classList.add('status')
       // insert each word into the div
       div.textContent = n;
       return div
    })
    return nodes
}
console.log(statusChecker('new,promotion'))