ReactJS Bootstrap 折叠个人卡片

Question

ReacJS Has an example for a single collapse:

function Example() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <Button
        onClick={() => setOpen(!open)}
        aria-controls="example-collapse-text"
        aria-expanded={open}
      >
        click
      </Button>
      <Collapse in={open}>
        <div id="example-collapse-text">
          Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus
          terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer
          labore wes anderson cred nesciunt sapiente ea proident.
        </div>
      </Collapse>
    </>
  );
}

render(<Example />);

But say I was iterating over an array of objects where each object is a Card and I want the button click on an individual card to only open that card and not all cards.

Currently I have this:

return (
        <div>
          <div className='card-detail'>All Cards ({this.props.cardDetails.details.length})</div>
          {this.props.cardDetails.details.map((detail, index) => {
            return (
              <CardStyle key={index}>
                <Container>
                  <CardRow>
                    <FlexCol>
                      <Button onClick={() => this.setState({ open: !this.state.open })} 
                      aria-controls="example-collapse-text" 
                      aria-expanded={this.state.open} 
                      variant="light">Expand</Button>
                    </FlexCol>
                  </CardRow>
                </Container>
                <CardDetailInfo save={this.saveCard} confirm={this.confirmCard} open={this.state.open} detail={detail}></CardDetailInfo>
              </CardStyle>)
          })}
        </div>
      )


The collapse code is an other class; 

class CardDetailInfo extends Component {
  constructor(props) {
    super(props);
  }
  render() {
      return (
<Collapse in={this.props.open}>
</Collapse>
)

...

Answer 1

ok so I was able to get it to work:

...
  constructor(props) {
    super(props);
    this.state = {
      open: []    
    }
    this.handleClick = this.handleClick.bind(this);
  }
    componentDidUpdate(oldProps) {
      if(oldProps.open !== this.props.open) {
        this.setState({
          open: this.props.open
        });
      }
    }

  handleClick(event) {
    const id = event.target.id;
    let local_open = this.state.open;
    local_open[id] = !local_open[id]
    this.setState({open: local_open });
  }
...

<Button id={index} onClick={this.handleClick}
variant="light">Expand</Button>

In another class I use if statements

if (this.props.open.length == 0 || this.props.open[this.props.index]==false)
default view

if(this.props.open[this.props.index]==true)
expand view

Answer 2

To have a toggle in each <Collapse> OR keep an array of open status for your list. Here are some options you have:

1. Single Collapse:

import React, { useState } from 'react';

function Collapse (props) {
  const [open, setOpen] = useState(props.in);
  
  useEffect(() => {
    setOpen(props.in);
  }, [props.in]);

  return (
     ...
  );
}

export default Collapse;

2. Add a new field to cardDetails called "open" and change that property when needed.