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 与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…