reactjs - Multiple Data feeds with React -
i'm new reactjs. i'm playing around components , i'm not sure i'm doing wrong. have 2 data sources, category & subcategory. i'd render main categories in div , i'd each sub category in it's own div it's list of possible link choices. when click on main category display sub categories. right i'm trying display correctly
var navigation = react.createclass({ render: function() { return ( <div classname="navigation"> <navigationcategorylist data={this.props.category} /> <navigationsubcategorylist data={this.props.category} subdata={this.props.subcategory} /> </div> ); } }); var navigationcategorylist = react.createclass({ render: function () { var links = this.props.data.map(function(category) { return ( <navigationcategory name={category.name} link={category.link} /> ); }); return ( <div> <div id="logo">test</div> <div classname="navigationcategory"> {links} </div> </div> ); } }); var navigationsubcategorylist = react.createclass({ render: function () { var sub = this.props.data.map(function(subcategory) { return ( <navigationsubcategorylinks name={subcategory.name} link={subcategory.link} subcategory={subcategory} /> ); }); return ( <div classname="subcategorycontainer"> {sub} </div> ); } }); var navigationsubcategorylinks = react.createclass({ render: function () { return ( <div classname="navigationsubcategory" id={this.props.name}> {this.props.name} links </div> ); } }); var navigationcategory = react.createclass({ render: function () { return ( <div classname="navigationlink"> <a href={this.props.link}>{this.props.name}</a> </div> ); } }); var category = [ {"id": 1, "name": "home", "link": "#"}, {"id": 2, "name": "about", "link": "#"}, {"id": 3, "name": "links", "link": "#"}, {"id": 4, "name": "contact", "link": "#"} ]; var subcategory = [ {"id": 1, "parent": "home", "name": "home link 1", "link": "#"}, {"id": 2, "parent": "home", "name": "home link 2", "link": "#"}, {"id": 3, "parent": "home", "name": "home link 3", "link": "#"}, {"id": 4, "parent": "home", "name": "home link 4", "link": "#"}, {"id": 5, "parent": "about", "name": "about link 1", "link": "#"}, {"id": 6, "parent": "about", "name": "about link 2", "link": "#"}, {"id": 7, "parent": "about", "name": "about link 3", "link": "#"}, {"id": 8, "parent": "about", "name": "about link 4", "link": "#"}, {"id": 9, "parent": "links", "name": "links link 1", "link": "#"}, {"id": 10, "parent": "links", "name": "links link 2", "link": "#"}, {"id": 11, "parent": "links", "name": "links link 3", "link": "#"}, {"id": 12, "parent": "contact", "name": "contact link 1", "link": "#"} ]; reactdom.render( <navigation category={category} subcategory={subcategory} />, document.getelementbyid('example') );
you need 2 things
- a state variable (say selected_category) store category have clicked on and
- a callback function (say handlechange) change state whenever click on category.
now subcategorylist display items have parent selected category. https://jsfiddle.net/69z2wepo/30587/
var navigation = react.createclass({ getinitialstate: function() { return {selected_category: 'home'}; }, handlechange(e){ this.setstate({selected_category: e.target.firstchild.data}); }, render: function() { return ( <div classname="navigation"> <navigationcategorylist data={this.props.category} handlechange={this.handlechange}/> <navigationsubcategorylist data={this.props.category} subdata={this.props.subcategory} selected_category={this.state.selected_category} /> </div> ); } }); var navigationcategorylist = react.createclass({ render: function () { var handlechange = this.props.handlechange; var links = this.props.data.map(function(category) { return ( <navigationcategory name={category.name} link={category.link} handlechange={handlechange}/> ); }); return ( <div> <div id="logo">test</div> <div classname="navigationcategory"> {links} </div> </div> ); } }); var navigationsubcategorylist = react.createclass({ render: function () { var selected = this.props.selected_category; var sub = this.props.subdata.map(function(subcategory) { if(subcategory.parent === selected) return ( <navigationsubcategorylinks name={subcategory.name} link={subcategory.link} subcategory={subcategory} /> ); }); return ( <div classname="subcategorycontainer"> {sub} </div> ); } }); var navigationsubcategorylinks = react.createclass({ render: function () { return ( <div classname="navigationsubcategory" id={this.props.name}> {this.props.name} links </div> ); } }); var navigationcategory = react.createclass({ render: function () { var handlechange = this.props.handlechange; return ( <div classname="navigationlink"> <a href={this.props.link} onclick={handlechange}>{this.props.name}</a> </div> ); } }); var category = [ {"id": 1, "name": "home", "link": "#"}, {"id": 2, "name": "about", "link": "#"}, {"id": 3, "name": "links", "link": "#"}, {"id": 4, "name": "contact", "link": "#"} ]; var subcategory = [ {"id": 1, "parent": "home", "name": "home link 1", "link": "#"}, {"id": 2, "parent": "home", "name": "home link 2", "link": "#"}, {"id": 3, "parent": "home", "name": "home link 3", "link": "#"}, {"id": 4, "parent": "home", "name": "home link 4", "link": "#"}, {"id": 5, "parent": "about", "name": "about link 1", "link": "#"}, {"id": 6, "parent": "about", "name": "about link 2", "link": "#"}, {"id": 7, "parent": "about", "name": "about link 3", "link": "#"}, {"id": 8, "parent": "about", "name": "about link 4", "link": "#"}, {"id": 9, "parent": "links", "name": "links link 1", "link": "#"}, {"id": 10, "parent": "links", "name": "links link 2", "link": "#"}, {"id": 11, "parent": "links", "name": "links link 3", "link": "#"}, {"id": 12, "parent": "contact", "name": "contact link 1", "link": "#"} ]; reactdom.render( <navigation category={category} subcategory={subcategory} />, document.getelementbyid('example') );
Comments
Post a Comment