Unable to convert ReactJS project to React-Redux

Question

I am new to React-Redux , I've created a ReactJS project and I am trying to convert my project to React-Redux. I won't understand how it is possible.

If anyone has any idea please suggest me.

Here is my project code

 import React, { Component } from 'react'; import './accordion.css'; class Accordion extends Component { state = { active: '', height: '0px' }; content = React.createRef(); toggleAccordion = () => { this.setState({ active: this.state.active === '' ? "active" : "non-active", height: this.state.active === 'active' ? "0px" : `${this.content.current.scrollHeight}px`, }) console.log(this.content) } render() { return( <div> <button className={`accordion ${this.state.active}`} onClick={this.toggleAccordion}> {this.props.title} </button> <div className="panel" ref={this.content} style={{maxHeight: `${this.state.height}`}}> {this.props.content} </div> </div> ); } } export default Accordion;

Here is my sandbox

https://codesandbox.io/s/crazy-cache-1xg32?file=/src/App.js

Answer 1

There are a couple of issues with the code you posted .

1. For handlers, you need to pass in a function instead of calling it. On your <Accordion> you have:

toggleAccordion={this.props.setActive(
  this.props.active.toggle === "" ? "active" : "non-active"
)}

Which calles the fuction on render, but you really only want to call the function when toggled:

toggleAccordion={() => this.props.setActive(
  this.props.active.toggle === "" ? "active" : "non-active"
)}

2. Refs cannot be passed to components as props. You need to use the forwardRef function provided by the React library.

3. Not sure what's going on here but it doesn't look like setHeight is actually a prop in the App component? In mapDispatchToProps you only have setActive . On top of that, why are you trying to use the spread operator ( ... ) here?

{...this.props.setHeight(
  this.props.height.expand === "active"
    ? "0px"
    : `${this.content.current.scrollHeight}px`
)}