score:1
Accepted answer
class Accordion extends React.Component {
state = {
active: '',
height: '0px',
}
content = React.createRef(null);
toggleAccordion = () => {
this.setState({
active: this.state.active === "" ? "active" : "non-active",
height: this.state.active === "active" ? "0px" : `${this.content.current.scrollHeight}px`
})
}
render() {
return (
<div className="accordion__section">
<button className={`accordion ${this.state.active}`} onClick={this.toggleAccordion}>
<div className="accordion__title"
dangerouslySetInnerHTML={{ __html: this.props.title }}
/>
</button>
<div ref={content} style={{ maxHeight: this.state.height }} className="accordion__content">
<div
className="accordion__text"
dangerouslySetInnerHTML={{ __html: this.props.content }}
/>
</div>
</div>
)
}
}
Source: stackoverflow.com
Related Query
- How to write this code in a class component using react
- how to write inline js event handler code in the react component using "this"
- How can I convert the this cascading dropdown class component to functional one using React Hooks?
- How to declare defaultProps on a React component class using TypeScript?
- How to write an ES6 class React Component that extends a functional component?
- How to get a React Component reference to change its class using classList?
- A better way to write this React Class Component with Hooks?
- How to convert a React Class Component to a Function Component this project
- How to write a wrapper around a material UI component using React JS?
- How to pass function from FUNCTIONAL to CLASS component and access it outside of render( without prop ), using context in react js?
- How can I convert a class with a constructor to a functional component using React Hooks?
- How do I create a class decorator for mixing new methods into a React component when using Typescript?
- How can I add or remove class using querySelectorAll() in react functional component
- Invalid hook call. Hooks can only be called inside... how to fix this maintaining the react class component
- How does this functional component using react hooks get its parameters?
- How does this React code translate to class representation?
- How would this React code look without React-hooks and with class components rather than functional components?(Button that open an additional window)
- How to render a react component using HTML class attribute?
- How to override child css class in parent react component using sass
- How to create algolia autocomplete custom renderer using react class component
- How to prevent this React JS Class Component setState error?
- How do I toggle class with React radio component using Hooks?
- How to find a React component inside an element with specific class using enzyme?
- How to write a test case for a simple React component using Jest and Enzyme
- How to test the anchor tag in react class component using jest and enzyme?
- How can I write React component that returns a class component as a functional component?
- How to reload page once state or data is changed within a react class using component did mount
- How to convert this React Class Component to a Function Component
- How to test the style inside the CSS class for React component using Jest and Enzyme?
- How to Declare Styled Components Using React Component Class Syntax
More Query from same tag
- Can not map array inside json in React
- How to integrate skylink in react project?
- Why does useRef never update current from null?
- Redux: Dynamically pass component to Provider
- VS Code - Request textDocument/definition failed
- React js, state won't update with my if and else statements
- Can I nest JSX Tags into one another using traditional JS syntax?
- React accessing setState in callback without arrow function
- React hooks state not updating when mapping
- Complex async flow that failed to execute as expected
- react redux split reducer change prev state
- ReactJS How to transfer data between pages?
- ReactJS with React Router - strange routing behaviour on Chrome
- How to mock a parent component which passes props to child component using react testing library
- saving background-image to state
- Change color of selected date in react-datepicker
- why I get display next month instead of current month
- React lifecycle with react hooks useEffect
- Reactjs: can't access props from parent but are visible in Chrome Developer Tools
- React-Lightbox Image
- Make multiple axios calls using jest
- AWS Amplify hosted React App url redirects is tricky
- Date range validation - Start Date must not be same as End Date in jquense / yup
- Unhandled Rejection (SyntaxError): Unexpected end of JSON input
- how only loop rows and not table in MUIdatatble ReactJs
- React context with firebase snapshot on user doc
- onClick inline function works different from outside function
- Cannot read property 'render' of undefined
- Egghead.io Redux tutorial - Lesson 17: "TypeError: Cannot read property 'map' of undefined
- Filling React JS dropdowns from Json data