Converting an Array of Strings to HTML using Reactjs - reactjs

Question

can anyone help me with the proper way to iterate over an array of strings, that will then be placed in a paragraph tag using Reactjs?
The array looks something like:
names = [ "James", "Susan", "Frank" ];
Here is my react component called "Riders" (I've added comments for help on what I'm trying to do):
import React from 'react';
import { Drivers } from '../api/drivers';
// The 'this.props.names' contains an array of names: ["John", "Susan", "John"].
// How would I iterate over the array, pull the names from this array, and then
// have those names rendered in a paragraph tag in a manner like:
// <p>John - Susan - John</p>
// So far I've attempted using template strings and the braces, {} , javascript
// injection. Doing this renders an empty paragraph. Please let know of the proper
// way to complete this task. Any help would be greatly appreciated. :)
export default class Riders extends React.Component {
renderNames() {
let empty = ``
let names = this.props.names;
let namesLength = names.length;
for (var i = 0; i < namesLength; i++) {
empty[i] = empty + `-` + ` ${empty[i]}`
}
return empty;
}
render() {
return (
<div>
<p>{this.renderNames}</p>
</div>
);
}
}

Answer 1

You have some errors in your code.
First of all you need to call renderNames when rendering
<p>{this.renderNames()}</p>
Then renderNames implementation is incorrect.
empty is a string which are immutable in js. You can't mutate one using indices empty[i] = something
You should check that current element is not first. Since you don't want to insert separator before the first element
Whole loop is redundant. There is a special method join to join array of strings with a given separator.
So renderNames could be a simple as return this.props.names.join(' - ')

Answer 2

So this works now! Here's the implementation of the Join method as suggested by #Yury:
import React from 'react';
import { Drivers } from '../api/drivers';
export default class Riders extends React.Component {
renderNames() {
return this.props.riders.join(' - ');
}
render() {
return (
<div>
<p>{this.renderNames()}</p>
</div>
);
}
}
Reference to the "Join()" method: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/join?v=control

Answer 3

Have a look at the JS .map method https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/map?v=control
With that you can just do something like:
let returnString = "";
this.props.names.map((item) => {
//TODO: add something to check if it's the last item
returnString += item + " - "
})

Answer 4

As indicated you should use {this.renderNames()}. Check the below example
export default class React.Component {
constructor(props) {
super(props);
}
renderNames() {
let empty = ``
let names = this.props.names;
let namesLength = names.length;
for (var i = 0; i < namesLength; i++) {
empty = empty + `-` + ` ${names[i]}`
}
return empty;
}
render() {
return(
<div>
{this.renderNames()}
</div>
)
}
}