I am working on an accordion project where I want to scroll button height by clicking one of the buttons. To accomplish this, I use Refs, and this working perfectly in React but I’ve to use Refs in React-Redux but this is not working.
Anyone can have suggestions about this problem, please Share that
Here Is my Reducer where I’ve scroll height of each button by clicking these:
import * as actionTypes from '../actions/actions';
const initialState = {
active: false,
height: '0px'
}
const reducer = (state = initialState, action) => {
switch(action.type) {
case actionTypes.ACTIVE_STATE:
return {
...state,
active: state.active === false ? true : false,
height: state.active === true ? '0px' : `${this.content.current.scrollHeight}` <---
}
default:
}
return state;
}
export default reducer;
Here is my accordion component where I’ve created Refs:
import React, { Component, forwardRef } from 'react';
import { connect } from 'react-redux';
import * as actionTypes from '../store/actions/actions';
class Accordion extends Component {
content = React.createRef(); <---
render() {
return (
<div>
<button className={`accordion ${this.props.accordions.active}`}
onClick={this.props.expandAccordion} >
{this.props.title}
</button>
<div className="panel">
{this.props.content}
</div>
</div>
);
}
}
const mapStateToProps = (state) => {
return {
accordions: state.data
};
}
const mapDispatchToProps = (dispatch) => {
return {
expandAccordion: () => dispatch({type: actionTypes.ACTIVE_STATE})
};
}
export default connect(mapStateToProps, mapDispatchToProps, null, { forwardRef: true })(Accordion);
Every suggestion or opinion can help to me.
Feel free to share your idea’s