React replace comma with a new line-CodePudding

How to I replace the comma with a new line?

Want to be like this Example

My code

<p className='containerProductDetailsPOne' style={{ overflow:"hidden",overflowY:"scroll" }}>
    {location.state.product.productSpec}
</p>

I tried

{location.state.product.productSpec.replace(/,/g, '<br>')}

and

{location.state.product.productSpec.replace(/,/g, '\n')}

but does not work

CodePudding user response：

Using replace is not possible to achieve what you want because react just renders the content, not the HTML or neither the HTML tags.

An alternative approach to solve this problem is to split the text using the comma separator as a parameter and display every single content of the resulting array like this:

let text = "Lorem Ipsum is simply, dummy text of the printing"
return (
     <div>
         {text.split(",").map((substring, idx)=> {
           return (
               <div key={idx}>
                 <span>{substring}</span>
                 <br />
               </div>
         }
     </div>

You can check my example on my code sandbox: https://codesandbox.io/s/awesome-ritchie-y9j9j2?file=/src/App.js:796-911

CodePudding user response：

Please use below code snippet

import React from "react";

class ProductSpec extends React.Component
{
    constructor(props)
    {
        super(props)
    }


   render()
   {
    let productSpec='Product 1, Product 2, Product 3'
    return(productSpec.split(",").map(p=><p id={p}>{p}</p>));
   }
}

ProductSpec.displayName='ProductSpec'
export default ProductSpec;