render issue in reactjs

Question

why is the Tags react component not showing the data from the getTags() function, I am not getting any error in console, not able to find the reason behind it.

this.props.discussion.tags the data is in this format

i am using the flux architecture this is the snippet of the code

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(){
    	return this.props.tags.map(tag => {
			<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>

Answer 1

try any one:

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

or

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

Answer 2

You are missing a return statement:

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