Not able to render state using componentWillReceiveProps - reactjs

Question

I am getting props from parent component and trying to render
From parent component, I am passing the headings
Parent Component:
class CoreCloudServices extends React.Component{
constructor(props){
super(props)
this.state = {
services:[]
}
}
loadData(){
var url = "https://api.myjson.com/bins/1ftfdx";
fetch(url)
.then(response => {
return response.json();
})
.then(d => {
this.setState({ services: d });
})
.catch(error => console.log(error))
}
componentDidMount() {
this.loadData();
}
render(){
<StatusFrame headings={this.state.services}/>
}
Child Component:
class StatusFrame extends React.Component{
constructor(props){
super(props)
this.state = {
labelHeading : this.props.headings
}
}
componentWillReceiveProps(newProps)
{
this.setState({labelHeading: newProps.headings} , ()=>{
console.log(this.state.labelHeading);
});
}
render(){
return(
<div>
<div>
{
this.state.labelHeading.map(((head, index) => {
<div>child {head.title}</div>
})
)
}
</div>
</div>
)}}
this.state.labelHeading is null but I am setting the state in componentwillreceiveprops()

Answer 1

you can just use the props without using the state , and you must return from your parent render method , also in map callback you should return too
class CoreCloudServices extends React.Component{
//...
render(){
return (<StatusFrame headings={this.state.services}/>)
}
}
class StatusFrame extends React.Component {
constructor(props){
super(props)
}
render() {
return (
<div>
<div>
{
this.props.headings !== null ?
this.props.headings.map(( (head, index) =>
{
return <div>child {head.title}</div>
}))
:
null
}
</div>
</div>
)
}
}