reactjsでレンダリングする

Question

タグリアクションコンポーネントがgetTags（）関数からのデータを表示しない理由は何ですか？私はコンソールに何のエラーも表示していません。その理由を見つけることができません。

データがこのフォーマットで

私は、これがコード

class DiscussionCard extends React.Component { 
 

 
    constructor(props) { 
 
    super(props); 
 

 

 
    } 
 
    render() { 
 
    return (<div> 
 
     <Tags tags = {this.props.discussion.tags}/> 
 
     </div> 
 
     ); 
 
    } 
 

 
} 
 

 

 
class Tags extends React.Component { 
 

 
    constructor(props) { 
 
     super(props); 
 
     this.getTags = this.getTags.bind(this); 
 
    } 
 
    
 
    getTags(){ 
 
    \t return this.props.tags.map(tag => { 
 
\t \t \t <span className="case-specialty-tag">{tag.name} |</span> 
 
    }); 
 
} 
 
render() { 
 
    console.log(this.props.tags) 
 
    return (<div className = "case-post-specialty" > 
 
     <div className = "row"> 
 
     <div className = "col-xs-12 col-sm-12"> 
 
     <div className = "case-specialty"> 
 
     <p className = "specialty-tag"> {this.getTags()} </p> 
 
     </div> 
 
     </div> 
 
     </div> 
 
     </div> 
 
     ); 
 
    } 
 

 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

の抜粋であるフラックスアーキテクチャ を使用していthis.props.discussion.tags

Answer 1

returnの声明がありません：

getTags(){ 
    return this.props.tags.map(tag => { 
     return <span className="case-specialty-tag">{tag.name} |</span> 
}); 

Answer 2

いずれかを試してみてください。

getTags(){ 
    return this.props.tags.map(tag => { 
     return <span className="case-specialty-tag">{tag.name} |</span> 
    }); 
} 

または

getTags(){ 
    return this.props.tags.map(tag => 
     <span className="case-specialty-tag">{tag.name} |</span> 
    ); 
}