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