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.
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>
}
}
{name}{idx < ids.length - 1 && <br />} for {!!idx && <br/>}{name}. The !! casts the idx number to a boolean, otherwize jsx will print it.
<Fragment> with <> if you don't need a key.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/>')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
Uncaught Error: props.dangerouslySetInnerHTML must be in the form {__html: ...}`