Convert array into array of React components separated by string

Question

How can I convert an array of string shown below

var players = ['ronaldo','messi','naymar','suarez','ozil']

into a jsx statement as shown below

<b>ronaldo</b> and <b>messi</b> and <b>naymar</b> and <b>suarez</b> and <b>ozil</b> and <b></b>

I tried to use .map and .join as shown below

players.map(player => <b>player</b>).join('and');

But it rendered out like this

[object Object] and [object Object] and [object Object] and [object Object]......

How can I achieve this? Thanks in advance

Tholle · Accepted Answer · 2018-07-06 08:44:52Z

9

join joins all elements of an array into a string, so it will be hard to use that with JSX, since JSX is just a bunch of React.createElement calls under the hood.

You could use React.Fragment instead and add and for all entries in the array except the last.

players.map((p, index) => (
  <Fragment>
    <b> {p} </b> {players.length - 1 !== index && "and"}
  </Fragment>
));

edited Jul 6, 2018 at 8:44

answered Jul 6, 2018 at 8:39

Tholle

113k22 gold badges209 silver badges198 bronze badges

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

Comments

Ori Drori · Accepted Answer · 2018-07-06 10:14:05Z

1

Rendering the <b> elements using Array.map(), and add the "and" between them using a CSS ::before pseudo element.

const players = ['ronaldo','messi','naymar','suarez','ozil'];

const Demo = ({ players }) => (
  <p>
  {
    players.map(player => (
      <b>{ player }</b>
    ))
  }
  </p>
);

ReactDOM.render(
  <Demo players={players} />,
  demo
);

b:not(:last-child)::after {
  font-weight: normal;
  content: ' and ';
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="demo"></div>

answered Jul 6, 2018 at 10:14

Ori Drori

196k32 gold badges243 silver badges233 bronze badges

Comments

user5734311 · Accepted Answer · 2018-07-06 08:54:35Z

Here are two ways to achieve this, one using plain HTML composition, the other using an array of arrays:

var players = ['ronaldo','messi','naymar','suarez','ozil'];

class App extends React.Component {
  render() {
    return (
      <div>
      <span dangerouslySetInnerHTML={{ __html: players.map(player => `<b>${player}</b>`).join(' and ') }} /><br/>
        { players.map((player, i) => [<b>{player}</b>, i < players.length - 1 && " and "]) }
      </div>
    )
  }
}

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

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

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

Harikrishnan · Accepted Answer · 2018-07-06 09:03:11Z

0

Here is a way to do it

players.map((player,index)=>(
    <div>
       <b>{data}</b>
       {(players.length-1) === i ? '' : ' and '}
    </div>))

edited Jul 6, 2018 at 9:03

answered Jul 6, 2018 at 8:42

Harikrishnan

1,0978 silver badges13 bronze badges

1 Comment

Johnson Cherian Over a year ago

I dont want the enclosing <div>

Mustkeem K · Accepted Answer · 2018-07-06 09:42:04Z

0

I would recomend you to use map(). Simply use map() function and return anything you want.

Here is JSfiddle link. You can edit it here.

https://jsfiddle.net/mustkeom/pqLhw3dg/

<div id="app">test</app>

var players = ['ronaldo','messi','naymar','suarez','ozil']

    let allPlayers = players.map((item, index)=>{

    return <React.Fragment> <b> {item} </b> { index < players.length-1 && 'and'  } </React.Fragment>

    })



ReactDOM.render(
  allPlayers,
  document.getElementById('app')
);

Just simple like this. Fragment is just a wrapper and will not render itself.

edited Jul 6, 2018 at 9:42

answered Jul 6, 2018 at 9:22

Mustkeem K

8,9002 gold badges34 silver badges45 bronze badges

2 Comments

user5734311 Over a year ago

There's a fifth "and" at the end of your result.

Mustkeem K Over a year ago

Just presented the idea. We can manage this thing with conditions. I updated the answer.

Manoz · Accepted Answer · 2018-07-06 10:23:24Z

0

You could just try with it

var mapped = players.map((item)=>('<b>'+item+'</b>')).join("and");

will get you result -

<b>ronaldo</b> and<b>messi</b> and<b>naymar</b> and<b>suarez</b> and<b>ozil</b>

answered Jul 6, 2018 at 10:23

Manoz

6,62713 gold badges72 silver badges117 bronze badges

Collectives™ on Stack Overflow

Convert array into array of React components separated by string

6 Answers 6

Comments

Comments

Comments

1 Comment

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related