Can I do an Array.join() with an HTML tag in React, using JSX?

Question

I would like to use the join() method on a Javascript array, but I would like to join() with an HTML tag.

I want to do something like:

class Page extends React.Component {
    render() {
        <p>
           {this.props.the_form['candidate_ids'].map((val,idx) => {
               return this.getCandidateName(val);
           }).join('<br/>')}
        </p>
    }
}

It's escaping the tag and not rendering a new line.

I'm using React, Webpack, and Babel.

Answer 1

Your code is fine. Assuming there is no framework at play here, the only thing I'd point out that you need to use innerHTML function

 var mArray =[ 'line 1', 'line 2']; document.body.innerHTML = mArray.map((val,idx) => { return `sometext: <strong>${val}</strong>`; }).join('<br/>') 

---

update:

since you're using react, you need to use dangerouslySetInnerHTML

class Page extends React.Component {
    render() {
        const html = this.props.the_form['candidate_ids'].map((val,idx) => {
               return this.getCandidateName(val);
           }).join('<br/>')
        return <p dangerouslySetInnerHTML={{__html:html}}></p>
    }
}

But since you're using JSX, you shouldn't need to use strings and dangerouslySetInnerHTML. You can also just use jsx to compose your dom:

class Page extends React.Component {
    render() {
        const {the_form} = this.props;
        const dom = the_form['candidate_ids'].map((val,idx) => {
           return (
             <>
               {this.getCandidateName(val)}
               {idx+1 < the_form['candidate_ids'].length ? </br> : null}
             </>
           );
        }))
        return (<p>{dom}</p>);
    }
}

docs: https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml

Answer 2

I have to add this, since dangerouslySetInnerHTML and joining a long string isn't really the react way to do it, and a bit misleading. Plus, you're missing the key on your mapped items

//import Fragment
import { Fragment, Component } from "react"

class Page extends Component {
  const ids = this.props.the_form['candidate_ids'];
  render() {
    <p>
      {ids.map((val, idx) => {
        const name = this.getCandidateName(val);
        return (
          <Fragment key={`${name}${idx}`}>
            {name}
            {idx < ids.length - 1 && <br />}
          </Fragment>
        );
      })}
    </p>
  }
}

(updated to remove the trailing <br/> ).

And here's a possible alternate version with no <br/> 's:

class Page extends Component {
  const ids = this.props.the_form['candidate_ids'];
  render() {
    <p>
      {ids.map((val, idx) => {
        const name = this.getCandidateName(val);
        return (
          <span key={`${name}${idx}`} style={{display: 'block'}}>
            {name}
          </span>
        );
      })}
    </p>
  }
}