How to open a collapse bar by onClick of an icon in another Component?

Question

I have a component MockTable which shows a list of some items in a table along with actions such as view, delete and update. I need to open a collapse bar in another component AddMock by clicking any of these actions in MockTable. These actions are icons. I'm using semantic-ui react and react-Bootstrap.

actions in Mocktable =>

    <Icon link name="eye" />
    <Icon link name="edit" />
    <Icon link name="delete" /> 

AddMock =>

const AddMock = () => {
  return (
    <div className="row">
      <Accordion style={{ paddingLeft: "32px" }}>
        <Card className="collapseStyle">
          <Card.Header>
            <Accordion.Toggle as={Button} variant="link" eventKey="0">
              Add Mock
            </Accordion.Toggle>
          </Card.Header>
          <Accordion.Collapse eventKey="0">
            <Card.Body>
              <Container className="mockbody">
                <Header as="h3">Hierarchy</Header>
                <TabContent />
              </Container>
            </Card.Body>
          </Accordion.Collapse>
        </Card>
      </Accordion>
    </div>
  );
};

How to implement this scenario?

Answer 1

In the component that possess the actions edit, view & delete, you can declare a state variable isActive and pass it through props to the component AddMock. Assuming Mocktable.js looks something like following.

MockTable.js:

const MockTable = () => {
  const [isActive, setIsActive] = useState(false);
  
  return (
   <Icon link name="eye" onClick={()=>setIsActive(!isActive)} /> // this will act as toggle (show & hide)
   <Icon link name="edit" onClick={()=>setIsActive(!isActive)} />
   <Icon link name="delete" onClick={()=>setIsActive(!isActive)} /> 
   <AddMock isActive={isActive} />
  )
 }

AddMock.js

const AddMock = ({ isActive }) => {


return (
    <div className="row">
      <Accordion active={isActive} style={{ paddingLeft: "32px" }}>   // passing isActive here to show/hide.
        <Card className="collapseStyle">
          <Card.Header>
            <Accordion.Toggle as={Button} variant="link" eventKey="0">
              Add Mock
            </Accordion.Toggle>
          </Card.Header>
          <Accordion.Collapse eventKey="0">
            <Card.Body>
              <Container className="mockbody">
                <Header as="h3">Hierarchy</Header>
                <TabContent />
              </Container>
            </Card.Body>
          </Accordion.Collapse>
        </Card>
      </Accordion>
    </div>
  );
};