React.js将多个json值传递给一个子参数

Question

I have a json object:

"tags": ["salmons","kitchenaccident"]

And I have a Component that parses through the JSON..

var entryNodes = this.props.data.data.map(function(entry) {
       return (
         <EntryComponent
             id={entry.user.id}
             img={entry.images.thumbnail.url}
             likes={entry.likes.count}
             link={entry.link}
             username={entry.user.username}
             caption={entry.caption.text}
             tag={entry.tags}/>
       );

However, it passes it through as one concatendated string: salmonskitchenaccident.

If I wanted it to render as '#salmons #kitchenaccident'.. what would be the best solution.

var EntryComponent = React.createClass({
render: function() {
    return(
            <div className="entry">
                <div className="entry-left">
                    <img className="img-rounded" src={this.props.img} />
                    <div className="like-section">
                        <img className="heart" src="./img/heart.png" />
                        <span className="likes">{this.props.likes}</span>
                    </div>
                </div>
                <div className="entry-right">
                    <h4><a href={this.props.link}>{this.props.username}</a>    </h4>
                    <p>{this.props.caption}</p>
                    <p className="hash">{this.props.tag}</p>
                </div>
            </div>
        );
    }
});

Answer 1

In this line:

<p className="hash">{this.props.tag}</p>

you try to display an array straight away, which implicitly calls the toString() method of the tags array. You need to map the items in your array to HTML nodes, like this:

<p className="hash">{this.props.tag.map( tag => (<span>{ '#' + tag }</span>) }</p>