在 ReactJS 中的数组 object 之后添加空格

Question

I'm mapping an array in React where I'm outputting tags that are held in an array. I've got commas after every object, but would like a space as well.

Here is the mapping code:

{
    result &&
        result.map(project => {
            if (project.item) project = project.item;
            return (
                <ProjectStyling key={project.id}>
                    <h4>Project Tags:</h4>
                    <p>{(project ? " " : ", ") + project.keywords}</p>
                </ProjectStyling>
            );
        });
}

At the moment it looks like "Bob,Foo,Bar" where I want it to look like "Bob, Foo, Bar"

Note there is already a space after the comma in the jsx

Answer 1

It's showing up without spaces because that's the default string representation of an array. You can use the join function to join each element with whatever separator you want.

In your case, I think a comma followed by a space is what you want.

<h4>Project Tags:</h4>
<p>{project.keywords.join(', ')}</p>