Split elements in array and add line break, then join - Javascript

Question

I'm mapping through data in Reactjs. This JSX:

{place.venue.location.formattedAddress}

Is mapping through this Axios data request, specially, this array in my response:

formattedAddress: Array(5)
0 : "Chester Rd"
1 : "London"
2 : "Greater London"
3 : "NW1 4NR"
4 : "United Kingdom"

As a result, when I'm mapping, it returns the data, in one sentence, all joined together. Exactly like this:

Serpentine RdHyde ParkGreater LondonW2 2TP

I'm trying to map through, split and join with a line break, but it's not working. My address stops appearing completely. What am I doing wrong?

Here's my code, (I've sliced, so I can remove the country off the end of the address).

{place.venue.location.formattedAddress.slice(0,4).split(',').join('<br />')}

Only strings have a .split method. If formattedAddress is an array, then formattedAddress.slice(...) returns another array. Just drop the .split. — Felix Kling
– Felix Kling, Commented Jun 5, 2018 at 21:40

Anurag Awasthi · Accepted Answer · 2018-06-05 21:51:07Z

7

class App extends React.Component{
  render(){
    var arr = ["hello", "there", "world"]
    return(
      <div>
        {arr.map(s=><React.Fragment>{s}<br/></React.Fragment>)}
      </div>
    )
  }
}

ReactDOM.render(<App />, document.getElementById("app"))

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="app"></div>

1 You are calling split on array, but it is a string method.

2 You cant use join using ' '. jsx will treat it as string.

you should map over your array elements and return an array of jsx.

{place.venue.location.formattedAddress.slice(0,4).map(s=><React.Fragment>s <br/></React.Fragment>)}

edited Jun 5, 2018 at 21:51

answered Jun 5, 2018 at 21:41

Anurag Awasthi

6,2532 gold badges21 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

uadnal Over a year ago

This is not quite like join as join would not append a   to the end of the array of elements

fabpico Over a year ago

@Trevor Here is how to do it without final   stackoverflow.com/a/68680034/4840661

fabpico · Accepted Answer · 2021-08-06 10:23:13Z

3

Using map without generating an ending break.

const breakedAttributes = attributes.map((attribute, index) => {
    const isLast = attributes.length === (index + 1);
    return !isLast ? <>{attribute}<br/></> : attribute;
})

answered Aug 6, 2021 at 10:23

fabpico

2,9864 gold badges32 silver badges50 bronze badges

Comments

0stone0 · Accepted Answer · 2023-01-09 17:16:23Z

Since the accepted answer's method will leave a trailing  , I'd share my approach.

Use reduce() on your array to insert a   between each item, since React can render Array's without any issues, this will result in the expected behaviour:

{arr.reduce((p, c) => [ p, <br />, c ])}

<div>
    hello
    <br>
    there
    <br>
    world
</div>

React 17 Demo

const { useState } = React;

const Example = () => {

    const arr = [ "hello", "there", "world" ];

    return (
        <div>
            {arr.reduce((p, c) => [ p, <br />, c ])}
        </div>
    )
}
ReactDOM.render(<Example />, document.getElementById("react"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="react"></div>

Collectives™ on Stack Overflow

Split elements in array and add line break, then join - Javascript

3 Answers 3

2 Comments

Comments

React 17 Demo

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

React 17 Demo

Comments

Your Answer

Sign up or log in

Post as a guest

Related