[Solved]-React Set Default Props on this.props.children-Reactjs

one way to slove the issue is to use static propTypes

static propTypes = {
    children: PropTypes.node.isRequired,
}

another way to slove the issue wish i recomend , is to not render the component unless you have fetched the value

if(!this.props.children){
    return(<div>Loading ....... </div>
}
 return (
      <div className={cName} style={railStyle}>
        <div className={'rail-details'}>
          <div className={'top-details'}>
            <div className={'title-lockup'}>
              <div className={'icon'} style={iconStyle}></div>
              <h3 className={'rail-title'}>{title}</h3>
            </div>
            <PrimaryButton label={'View All'} light={true}/>
          </div>

          <div className={'rail-navigation'}>
            <PrimaryButton icon='' light={true} />
            <PrimaryButton icon='' light={true} />
          </div>
        </div>

        <div className={'rail-items'}>
          {this.props.children}
        </div>
      </div>
    );

One way of solving this is to import the 'prop-types' component see the following example:-

import PropTypes from 'prop-types';

const propertyType = ({[name_of_property]}) => {
  <div><h1>{name_of_property}</h1></div>
};

propertyType.propTypes = {
  [name_of_property]: PropTypes.string,
};
propertyType.defaultProps ={
  [name_of_property]: [default_value],
};

read this when you can : https://www.npmjs.com/package/prop-types

You can set the default props using the class name as shown below.

class Greeting extends React.Component {
  render() {
    return (
      <h1>Hello, {this.props.name}</h1>
    );
  }
}

// Specifies the default values for props:
Greeting.defaultProps = {
  name: 'Stranger'
};

You may refer this link from react's documentation for more info.