I'd like some advices on best practises on using react - reactjs

Question

As a way to learn new frameworks, I usually rewrite a small web app I made to handle a list of mp3s I use in a web radio. So, now, it's react's turn !
So basically, I render a table that has fields, and one of those td has a list of tags, as I use bootstrap for that purpose, I have bootstrap labels (that are called badges on bootstrap 4), so here's the minimum example of code I could have :
<td>
<span class="badge badge-success">tag1</span>
<span class="badge badge-success">tag2</span>
<span class="badge badge-success">tag3</span>
</td>
So, basically, to teach myself how to use a component inside a component by the example, I made a component to handle the tags (showing them, and later, have a popup to select them) but the way I have to render the data is so inelegant, I suppose there's some way to make it better.
here is the render() of the component :
render() {
return (
<span>
{ this.props.tags.map((tag) => {
return (
<span key={tag._id}>
<span className="badge badge-success">{tag.intitule}</span>
{' '}
</span>
);
})}
</span>
);
}
I suppose I could render the whole td to avoid a span, but then it would not be as reusable as withouth it. So, how can I make this prettier to read, and with a more elegant rendered code.

Answer 1

Rendering children components without a parent tag is now impossible, but there is an open GitHub issue that hopefully will let us avoid this limitation.
However, your code can be more elegant if you will convert it to:
render(){
const { tags } = this.props;
return (
<div>
{ tags.map(tag => <span key={tag._id} className="badge badge-success">{tag.intitule}</span>) }
</div>
)
}
Update #1
You can also separate "tag" to a stateless functional component, like so:
const Tag = ({tag}) => (
<span className="badge badge-success">{tag.intitule}</span>
);
then, in other, more complex component, you can do
class ComplexComponent extends React.Component{
render(){
const { tags } = this.props;
return (
<div>
{ tags.map(tag => <Tag key={tag._id} tag={tag} />) }
</div>
)
}
}
Check this fiddle.

Answer 2

I think I would do the mapping out of the return. Like this :
render() {
let labels = this.props.tags.map((tag) => {
return (
<span key={tag._id}>
<span className="badge badge-success">{tag.intitule}</span>
{' '}
</span>
);
})
return (
<span>
{ labels }
</span>
);
}
You could also create a small component for your labels (a little bit overkill), like this:
export class MyLabel extends React.Component {
render() {
const {tag} = this.props;
return <span key={tag._id}>
<span className="badge badge-success">{tag.intitule}</span>
{' '}
</span>
}
}
... // In your main Component
render() {
let labels = this.props.tags.map((tag) => {
return <MyLabel tag={tag}/>;
})
return (
<span>
{ labels }
</span>
);
}