CODEWITHSUNDEEP
reactjsmaterial-ui
Hamza Bouallegue
Hamza Bouallegue

Reputation: 121

React material UI accordion: how to call a function when accordion is open?

I'm using React material-ui. I'm trying to call a function only when the Accordion is open:

                                <Accordion  opened={()=>this.myFn(row.id)} >
                                <AccordionSummary

                                    expandIcon={<ExpandMoreIcon/>}
                                    aria-controls="panel1a-content"
                                    id={row.id}

                                >
                                    <Typography>{row.name}</Typography>
                                </AccordionSummary>
                                <AccordionDetails id={row.id} >

                                   <p>something <p/>

                                </AccordionDetails>
                            </Accordion>

Upvotes: 2

Views: 8337

Answers (1)

Shubham Verma
Shubham Verma

Reputation: 5054

There is props in Accordian onChange you can pass it and track it if accordian is open fire this function i.e

<Accordion onChange = {(e,expanded) => {
        if(expanded){
          calledFunction()
        }
      }}>

In your case it would be something like this:

<Accordion   onChange = {(e,expanded) => {
        if(expanded){
          this.myFn(row.id)
        }
      }} >

Here is demo: https://codesandbox.io/s/spring-leftpad-uu9yc?file=/demo.js

Upvotes: 6

Related Questions