Q:

Not able to render state using componentWillReceiveProps

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()

A:

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>
        )
    }
}

