ReactJs - Function in Render doesn't Show Up - reactjs

Question

**
Update: This questions has an answer that worked. It is important to
note that even though you have a return statement in your function
called within render(), it is still important to wrap the entire loop
in a parent "return" in order for it to render properly on state
change. This is a different common issue where state is not updated
properly.
I have the following ClientList component, which shows a list of customers retrieved from database.
Below in the Render() function, i am calling the showList function which will display a list once this.props.clientList Reducer is populated.
Problem is... if I were to call the showList codes directly inside the Render() method, it will show.
IF i were to put it in a showList function, and call {this.showList} it doesn't shows up in the render.
I have the screen shot of the console as well, showing that the list is populated already.
Is this method disallowed? I see many tutorials teaching us to do this but it's not working for me. What are the restrictions to use this method to return the codes for render?
class ClientList extends Component {
constructor(props) {
super(props);
this.state = {
clientId : ''
}
this.getClientList = this.getClientList.bind(this);
this.showList = this.showList.bind(this);
console.log('initializing', this.props);
}
componentDidMount(){
this.getClientList();
}
getClientList() {
if (this.props.actions) {
this.props.actions.getClientList(); //This is an ajax action to retrieve from Api
}
}
showList() {
//If i put all the codes below directly in Render, it will show.
console.log('props from showList', this.props.clientList);
this.props.clientList && Object.keys(this.props.clientList).reverse().map((index,key) => {
return (
<div key={key}>
<div><a onClick={() => this.showProfileBox(this.props.clientList[index].customerId)}>Name: {this.props.clientList[index].firstname} {this.props.clientList[index].lastname}</a><span className="pull-right"><Link to={"/client/" + this.props.clientList[index].customerId}>Edit</Link></span></div>
</div>
);
})
}
render() {
console.log('rendering', this.props);
return (
<div>
<Col xs={12} md={8}>
<h1>Client List</h1>
{ this.showList() } // <= This function doesn't print
</Col>
</div>
)
}
}
function mapStateToProps(state) {
return {
clientList: state.clientList,
};
}
function mapDispatchToProps(dispatch) {
return {
actions: bindActionCreators(clientActions, dispatch)
};
}
export default connect(mapStateToProps, mapDispatchToProps)(ClientList);

Answer 1

Your should return the value from showList() method. As of now you were returning the value for map method, but not for the entire showList() method. Thats y it is painting nothing in the page
`
showList() {
return (
//removed unnecessary {}
this.props.clientList && Object.keys(this.props.clientList).reverse().map((index,key) => {
return (
<div key={key}>
<div><a onClick={() => this.showProfileBox(this.props.clientList[index].customerId)}>Name: {this.props.clientList[index].firstname} {this.props.clientList[index].lastname}</a><span className="pull-right"><Link to={"/client/" + this.props.clientList[index].customerId}>Edit</Link></span></div>
</div>
);
})
);
}
`

Answer 2

You don't need to bind showList in the constructor.
Remove it and you should be fine.
Also, as #JayabalajiJ pointed out, you need to return something out of showList otherwise you won't see the final result.
class ClientList extends React.Component {
constructor() {
super()
this.handleClick = this.handleClick.bind(this)
}
handleClick() {
console.log('click')
}
showList() {
return <button onClick={this.handleClick}>From showList</button>
}
render() {
return (
<div>
<button onClick={this.handleClick}>Click-me</button>
{this.showList()}
</div>
)
}
}
ReactDOM.render(
<ClientList />,
document.getElementById('root')
)
<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>
<div id="root"></div>