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

Bill · Answer 1 · 2020-09-29T07:26:41.913

0

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

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"
)}

Refs cannot be passed to components as props. You need to use the forwardRef function provided by the React library.
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`
)}

edited Sep 29 '20 at 07:26

answered Sep 29 '20 at 05:35

Bill

764
6
14

Thanks for suggesting me. I've tried these things and these are working perfectly. But the problem is how we create actions, reducers, and call it on the store. These things are not clear. when I create actions, reducers, and actual store then these things do not work. – Muzamil Hussain Sep 29 '20 at 05:59
@MuzamilHussain Then show us _that_ code that is not working and ask how you can remedy it. Don't show us the code with zero Redux stuff and ask us to overhaul it for you. – JLRishe Sep 29 '20 at 06:00
Here is my code sandbox with Redux and issues: https://codesandbox.io/s/gracious-glade-u90xy?file=/src/App.js – Muzamil Hussain Sep 29 '20 at 07:02
@MuzamilHussain updated my answer, try these and see if you can figure out how to fix it. If other problems come up I recommend you post the specific issues as separate questions, and do the same thing you did here - post the code with the specific issue. – Bill Sep 29 '20 at 07:28
Ok Thanks, I will post new question with specific error – Muzamil Hussain Sep 29 '20 at 10:31

Unable to convert ReactJS project to React-Redux

1 Answers1