如何在点击时使用传入的道具渲染 React 组件

Question

I am making a Menu using React and Redux but am currently having an issue rendering the items when the user selects a category.

My goal is to render a list of items nested in the redux state of a particular category when it is clicked.

In Categories.js, it loads the categories from the redux store and displays them.

import React, { Component } from "react";
import { connect } from "react-redux";
import CategoryItems from "./CategoryItems"
import {
  Card,
  CardTitle,
  CardImg,
  Container,
  Row,
  Col,
  CardBody,
  Button
} from "shards-react";

class Categories extends Component {
  handleClick = category => {

    alert(category.title);

   return (
     <CategoryItems 
      category={category}
     />

   );

  };

  render() {
    let categoryList = this.props.categories.map(category => {
      return (
        <div key={category.id}>
          <Col>
            <Card
              key={category.id}
              onClick={() => {
                this.handleClick(category);
              }}
            >
              <CardBody>
                <CardTitle>{category.title}</CardTitle>
              </CardBody>
            </Card>
          </Col>
        </div>
      );
    });
    return (
      <Container>
        <Row>{categoryList}</Row>
      </Container>
    );
  }
}

const mapStateToProps = state => {
  return {
    categories: state.categories,


  };
};

export default connect(mapStateToProps)(Categories);

When a category is clicked, (the alert was just so I could make sure data made it) I have it set to render the items Array nested within the selected category.

import React, { Component } from 'react'
import {
    Card,
    CardTitle,
    CardImg,
    Container,
    Row,
    Col,
    CardBody,
    Button
  } from "shards-react";



export class CategoryItems extends Component {
    render() {
        let items = this.props.category.items;

        let categoryItems = items.map(item => {
            return (
              <Col className="">
                <Card
                  className="mt-2 mb-2 item-col"
                  style={{ maxWidth: "500px" }}
                  key={item.id}
                >
                  <CardBody>
                    <CardTitle style={{ position: "absolute", top: 20, right: 20 }}>
                      {item.title}
                    </CardTitle>
                    <CardImg
                      style={{ maxWidth: "200px" }}
                      src={item.img}
                      alt={item.title}
                    />
                    <span
                      style={{ position: "absolute", bottom: 40, right: 100 }}
                      to="/"
                      // onClick={() => {
                      //   this.handleClick(item.id);
                      // }}
                    >
                      <Button pill theme="info">
                        +
                      </Button>
                    </span>
                    <div style={{ position: "absolute", bottom: 40, right: 20 }}>
                      ${item.price}
                    </div>
                  </CardBody>
                </Card>
              </Col>
            );
          });
          return (
            <Container className="menu-item-cont">
              <Row>{categoryItems}</Row>
            </Container>
          );
    }
}

export default CategoryItems

This part does not render the items and I don't get an error message.

I have also tried placing the items I would like rendered directly into the state just to see if I could get them to render on click similar to how the Categories.js is with no luck.

I am somewhat new to react so please forgive me if this is a beginner question.

Any help is appreciated as I have spent hours trying to figure this out.

Answer 1

The problem is that you're not rendering what gets returned from handleClick . What you need is a conditional render in the JSX, then determine whether or not to render the elements depending on a controlled flag variable in the state.

class Categories extends Component {
  constructor() {
    this.state = {
      show: false,
      category: undefined
    }

    this.toggle = (category) => {
      this.setState({ show: !this.state.show, category })
    }
  }

  render() {
    let categoryList = this.props.categories.map(category => {
      return (
        <div key={category.id}>
          <Col>
            <Card
              key={category.id}
              onClick={e => this.toggle(category)}
            >
              <CardBody>
                <CardTitle>{category.title}</CardTitle>
              </CardBody>
            </Card>
          </Col>
        </div>
      );
    });
    return ([
      <Container>
        <Row>{categoryList}</Row>
      </Container>,
      (
        this.state.show 
        ? <CategoryItems category={this.state.category}/> 
        : null
      )
    ]);
  }
}