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

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

• javascript
• reactjs
• ecmascript-6

6 Answers 6

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

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./ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/react/15.1.0/react-dom.min.js"></script>

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

Here are two ways to achieve this, one using plain HTML position, 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./ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

Here is a way to do it

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

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

Here is JSfiddle link. You can edit it here.

https://jsfiddle/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.

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>