split a string by newline in react

Question

I have a json string for order.expeditionPlaces which is formatted like:

"expeditionPlaces": "Place1, Place2, Place3"

I am able to split the data but I can't get the string to go onto a new line as html tags are escaped within react

{order.expeditionPlaces ? order.expeditionPlaces.split(",").join("<br>") : ""}

should display:

Place1

Place2

How can I re-write this so the string splits onto new lines?

My current code is

if (this.state.possibleOrders && this.state.possibleOrders.length > 0) {
        this.state.possibleOrders.forEach((order, index) => {
            possibleOrders.push(<tr key={index}>
                <td>{order.orderId}</td>
                <td>{order.orderState}</td>
                <td>{order.expeditionPlaces ? order.expeditionPlaces.split(",").join("<br>") : ""}</td>
                <td>{order.sortingBufferPlaces}</td>
            </tr>);
        });
    }

Answer 1

In your case JSX does not interpret "<br />" as a HTML tag , but as a string , so

<td>
{
  order.expeditionPlaces 
    ? order.expeditionPlaces.split(",").join("<br>") 
    : ""
}
</td>

should be

<td>
{
  order.expeditionPlaces 
    ? order.expeditionPlaces.split(",").map(place => <p> {place} </p>) 
    : ""
}
</td>

Answer 2

Your actual code returns a string when you need a react component :)

This code should work (not tested, might need some ajustments)

if (this.state.possibleOrders && this.state.possibleOrders.length > 0) {
    this.state.possibleOrders.forEach((order, index) => {
        possibleOrders.push(<tr key={index}>
            <td>{order.orderId}</td>
            <td>{order.orderState}</td>
            <td>
                {(order.expeditionPlaces || []).split(",").map(function(place, i) {
                    return <p key={i}>place</p>
                })}
            </td>
            <td>{order.sortingBufferPlaces}</td>
        </tr>);
    });
}

-EDIT replace

<p>

with whatever needed

<div key={i}>place<br/></div> 

will work too