CODEWITHSUNDEEP
reactjsreduxreact-reduxredux-form
Kathrine Hanson
Kathrine Hanson

Reputation: 625

How can I connect a component that holds the state and a presentational component?

I want to connect 2 different components. One component holds the state and the other is the presentational component. I want to show the products for each category to the CategoryContainer. But I need to have the categoryId in the ProductsList to show the products and set the correct values to the appropriate properties of some components(like TextBox, Dropdown). Any Ideas?

Component that holds state:

render() {
    const {
      categoryId,
      categoryName
    } = this.props;
    return (
        <MainComponent>
                <label>Your categoryId is: </label>
                {categoryId}
              <label>Your categoryName is: </label>
                {categoryName}
              <label>The products of this category are: </label>
            <div>
              <ProductLists />
            </div>
          </MainComponent>
  };
}


const mapStateToProps = (state, ownProps) => {
  return {
    categoryName:
      selectAttributelById(state, ownProps.categoryId) &&
      selectAttributelById(state, ownProps.categoryId).get("categoryName")
  };
};

CategoryContainer = connect(
  mapStateToProps
)(toJS(CategoryContainer));

CategoryContainerWrapped.propTypes = {
  categoryName: PropTypes.bool
};

export default CategoryContainer;

Presentational Component:

class ProductLists extends Component {
  constructor(props) {
    super(props);
    this.state = {
      expanded: false
    };
  }

  render() {
    return (
      <div>
      <TextBox/>
      <DropDownList />
      </div>
    );
  }
}

ProductLists.propTypes = {
};

export default ProductLists;

Upvotes: 0

Views: 47

Answers (1)

Andrei Olar
Andrei Olar

Reputation: 2358

Firstly you need to read more about react and how to pass values as props between your components.

Secondly in your render function you need to pass the values as props to your ProductList component.

render() {
    const {
      categoryId,
      categoryName
    } = this.props;

    return (
        <MainComponent>
            <label>Your categoryId is: </label>
            {categoryId}

            <label>Your categoryName is: </label>
            {categoryName}

            <label>The products of this category are: </label>

            <div>
                <ProductLists categoryId={categoryId} categoryName={categoryName} />
            </div>
        </MainComponent>
     );
  };
}

Lastly in order to see the categoryId and categotyName in you ProductList you just need to display them.

class ProductLists extends Component {

    constructor(props) {
        super(props);
        this.state = {
            expanded: false
        };
    }

    render() {
        return (
            <div>
                CategoryId: {this.props.categoryId}
                CategoryName: {this.props.categoryName}
               <TextBox/>
               <DropDownList />
           </div>
        );
    }
}

ProductLists.propTypes = {
    categoryId: PropTypes.number,
    categoryName: PropTypes.string
};

export default ProductLists;

Upvotes: 1

Related Questions