json - Show specific component when click component react js

Question

Need help,

I try to show subFile.js component when I clicked listgroup item. but the subFile.js all appear on all of listgroup items.

So in order to refactor the code, I have created a function called open to show subfile.js

here's my code :

product.js

constructor(props) {
    super(props);

    this.state = {
      products: [],
      showSub: false,
    };
  }

  open = () => {
    this.setState({
      showSub: true,
    });
  };

<ListGroup>
              <ListGroup.Item
                className="mb-2"
                style={{ cursor: "pointer" }}
                onClick={() => this.open()}
                key={product.id}
              >
                <Row>
                  <Col md={1}>
                    <FontAwesomeIcon icon={faFile} className="product-icon" />
                  </Col>
                  <Col>
                    <div className="product-title">{product.name}</div>
                    <p>
                      Contrary to popular belief, Lorem Ipsum is not simply
                      random text. It has roots in a piece of classical Latin
                      literature from 45 BC,making it over 2000 years old. All
                      the Lorem Ipsum generators on the Internet tend to repeat
                      predefined
                    </p>
                  </Col>
                  <Col md={1}>
                    <div className="product-title">{product.count}</div>
                  </Col>
                </Row>
                <SubFile {...this.state} />
              </ListGroup.Item>
            </ListGroup>

here's the code that i wanna show

SubFile.js

<Collapse in={showSub}>
        <ListGroup>
          <ListGroup.Item>Cras justo odio</ListGroup.Item>
          <ListGroup.Item>Dapibus ac facilisis in</ListGroup.Item>
          <ListGroup.Item>Morbi leo risus</ListGroup.Item>
          <ListGroup.Item>Porta ac consectetur ac</ListGroup.Item>
          <ListGroup.Item>Vestibulum at eros</ListGroup.Item>
        </ListGroup>
      </Collapse>

question from:https://stackoverflow.com/questions/66058792/show-specific-component-when-click-component-react-js

Answer 1

Waitting for answers