React.js Bind results as cards which are getting from web api - reactjs

Question

Hi all I have a working sample when I use the data as constant in React js. The same output I need when the data is returning from a controller can some one help me. Here is the expected on https://codepen.io/anon/pen/KQVmzK
My code with controller call, in render I would like to render the result as in the sample
class UserList extends React.Component {
constructor() {
super();
this.state = { person: [] };
}
componentDidMount() {
this.UserList();
}
UserList() {
fetch("/ReactJS/GetMessage")
.then(res => res.json())
.then(
(result) => {
alert(result);
this.setState({
//isLoaded: true,
person: result
});
}
)
}
render() {
// need to bind the html result as per in the fiddle
}
}
ReactDOM.render(<UserList />, document.getElementById('form'));

Answer 1

render(){
{this.state.person.length > 0
?
<CardLists cards={this.state.person}>
:
null
}
}
<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 2

Finally after lot of research I did myself
class Application extends React.Component {
constructor() {
super();
this.state = {
camperArr: []
};
}
componentDidMount() {
this.callApi("/ReactJS/GetMessage");
}
callApi(str) {
var req = str;
this.serverRequest = $.get(req, function (result) {
result.map(function (elem, idx) {
elem["id"] = idx + 1;
});
this.setState({
camperArr: result
});
}.bind(this));
}
render() {
return (
<CardList list={this.state.camperArr} />
);
}
}
// the list of campers
class CardList extends React.Component {
render() {
var list = this.props.list;
return (
<div>
{list.map((card, index) => <Card key={index} {...card} />)}
</div>
);
}
}
class Card extends React.Component {
render() {
return (
<div style={{ margin: 'lem' }}>
<img width="75" src={this.props.UserImage} />
<div style={{ display: 'inline-block', marginLeft: 10 }}>
<div style={{ fontSize: '1.25em', fontWeight: 'bold' }} >{this.props.UserName}</div>
<div>{this.props.Company}</div>
</div>
</div>
);
}
}
ReactDOM.render(<Application />, document.getElementById('form'));