Home Ask Login Register

Developers Planet

Your answer is one click away!

MJ Bonanno February 2016

Multiple Data feeds with React

I'm new to ReactJS. I'm just playing around with components and I'm not sure what I'm doing wrong. I have 2 data sources, category & subCategory. I'd like to render my main categories in a DIV and then I'd like each sub category in it's own DIV with it's list of possible link choices. Ultimately when you click on a main category it will display the sub categories. Right now I'm just trying to get it all to display correctly

enter image description here

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

Answers


Ravi Kumar February 2016

You will need two things

  1. A state variable (say selected_category) to store what category you have clicked on and
  2. A callback function (say handleChange) to change that state whenever you click on a category.

Now SubCategoryList will only display those items that have their parent as the 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 (
         

Post Status

Asked in February 2016
Viewed 3,101 times
Voted 11
Answered 1 times

Search




Leave an answer


Quote of the day: live life

Devs Planet ®

2014-2016 www.devsplanet.com

Devs Planet © all rights reserved

Search