react jsx - getDefaultProps is not working using reactjs -

i trying use getdefaultprops method below example using react.js , found not working me: html:

<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"> </script>  <div id="container">   <!-- element's contents replaced component. --> </div> 

javascript:

var recentchangestable = react.createclass({   render: function() {     return ( < table classname = 'table' > {         this.props.children       } < /table>);     }   });  recentchangestable.heading = react.createclass({   render: function() {     var headingstyle = {       backgroundcolor: 'floralwhite',       fontsize: '19px'     };     return <th style = {       headingstyle     } > {       this.props.heading     } < /th>;   } });  recentchangestable.headings = react.createclass({   render: function() {     var headings = this.props.headings.map(function(name, index) {       return <recentchangestable.heading key = {         index       }       heading = {         name       }       />     });     return <thead > < tr > {       headings     } < /tr></thead >   } });  recentchangestable.row = react.createclass({     render: function() {       var trstyle = {         backgroundcolor: 'aliceblue'       }       return <tr style = {           trstyle         } >         < td > {           this.props.changeset.when         } < /td> < td > {       this.props.changeset.who     } < /td> < td > {     this.props.changeset.description   } < /td> < /tr > } });  recentchangestable.rows = react.createclass({       render: function() {         var rows = this.props.changesets.map(function(changeset, index) {             return ( < recentchangestable.row key = {                 index               }               changeset = {                 changeset               }               />);             });           return ( < tbody > {               rows             } < /tbody>)           }         });          var app = react.createclass({         getdefaultprops: function() {           return {             headings: ['when happened ', 'who did it', 'what change']           };         },         render: function() {           return ( < recentchangestable >             < recentchangestable.rows changesets = {               this.props.changesets             }             /> < /recentchangestable > );         }       });         var data = [{         "when": "2 minutes ago",         "who": "jill dupre",         "description": "created new account"       }, {         "when": "1 hour ago",         "who": "lose white",         "description": "added fist chapter"       }];        var headings = ['when', 'who', 'description'];       var props = {         headings: headings,         changesets: data       };        react.render( < app changesets = {           data         }         />, document.body); 

can tell me there missing here.

i updated code mentioned below , worked me:

var recentchangestable = react.createclass({   render: function() {     return ( < table classname = 'table' > {         this.props.children       } < /table>);     }   });  recentchangestable.heading = react.createclass({   render: function() {     var headingstyle = {       backgroundcolor: 'floralwhite',       fontsize: '19px'     };     return <th style = {       headingstyle     } > {       this.props.heading     } < /th>;   } });  recentchangestable.headings = react.createclass({   render: function() {     var headings = this.props.headings.map(function(name,index) {       return <recentchangestable.heading key={index} heading = {         name       }       />     });     return <thead > < tr > {       headings     } < /tr></thead >   } });  recentchangestable.row = react.createclass({     render: function() {       var trstyle = {         backgroundcolor: 'aliceblue'       }       return <tr style = {           trstyle         } >         < td > {           this.props.changeset.when         } < /td> < td > {       this.props.changeset.who     } < /td> < td > {     this.props.changeset.description   } < /td> < /tr > } });  recentchangestable.rows = react.createclass({       render: function() {         var rows = this.props.changesets.map(function(changeset,index) {             return ( < recentchangestable.row key={index} changeset = {                 changeset               }               />);             });           return ( < tbody > {               rows             } < /tbody>)           }         });          var app = react.createclass({                 getdefaultprops:function(){             return {             headings:['when happened','who did it','what change']           };         },            render: function() {             return ( < recentchangestable >               < recentchangestable.headings headings = {                 this.props.headings               }               /> < recentchangestable.rows changesets = {               this.props.changesets             }             /> < /recentchangestable > );         }       });      var data = [{       "when": "2 minutes ago",       "who": "jill dupre",       "description": "created new account"     }, {       "when": "1 hour ago",       "who": "lose white",       "description": "added fist chapter"     }];      var headings = ['when', 'who', 'description'];     var props = {       //headings: headings,       changesets: data     };       reactdom.render( < app {...props}/>,       document.getelementbyid('container'));