Issues with slide toggle in React-Redux

Hi All,

hoping I can get some pointing in the right direction here ^^;

So I am trying to create a component with the toggle function to show/hide upon a click, with a transition. In jQuery, this can be achieved with a simple slideToggle function. In react with redux, I have found this fairly challenging to achieve in a way that is easily manageable/extendable to multiple components.

This has proved to be difficult to do for cases where I am using the same component multiple times. If the component is a function component, all instances are modified by the event; however if I choose a redux-react component set up and try to take advantage of “this”, then the state reflecting the current store is not updated properly.

Post.js function component iteration

import React from 'react';
import store from '../store';
import { toggleClose, toggleOpen } from '../actions'

let Post = () => {

    let state = store.getState();

    function toggleLength (evt){
        if(state.toggle == "content") {
            console.log(state.toggle + "hey");
            store.dispatch(toggleOpen());
        } else {
            store.dispatch(toggleClose());
            console.log(state.toggle + "hey");

        }
    }

    return (
        <div className="blog-post">
            <h2 className="blog-title">Title</h2>
            <h3 className="blog-subtitle">A description of the topic</h3>
            <button type="button" className="collapsible" onClick={toggleLength}><i className="fas fa-chevron-down"></i></button>
            <div className={state.toggle}>
                <img src="https://picsum.photos/600/300" alt="random image" width="100%" height="300px" srcSet="" />
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem saepe ea magni eum unde sit nam accusamus, quasi incidunt ab maiores qui dolor harum cumque, et quaerat eius sint nisi.</p>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum non iure neque, enim deserunt modi vel ducimus repellendus vitae dolorem quo nihil unde amet fuga saepe labore molestiae ut velit.</p>
            </div>
        </div>
    )
}

export default Post;

Post.js react component version

import React from 'react';
import store from '../store';
import { toggleClose, toggleOpen } from '../actions'
class Post extends React.Component {
    constructor () {
        super();
        this.state = store.getState()
        this.toggleLength = this.toggleLength.bind(this);
    }
    toggleLength (evt){
        if(this.state.toggle == "content") {
            console.log(this.state.toggle + "hey");
            store.dispatch(toggleOpen());
        } else {
            store.dispatch(toggleClose());
            console.log(this.state.toggle + "hey");
        }
    }
    render() {
        return (
            <div className="blog-post">
                <h2 className="blog-title">Title</h2>
                <h3 className="blog-subtitle">A description of the topic</h3>
                <button type="button" className="collapsible" onClick={this.toggleLength}><i className="fas fa-chevron-down"></i></button>
                <div className={this.state.toggle}>
                    <img src="https://picsum.photos/600/300" alt="random image" width="100%" height="300px" srcSet="" />
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem saepe ea magni eum unde sit nam accusamus, quasi incidunt ab maiores qui dolor harum cumque, et quaerat eius sint nisi.</p>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum non iure neque, enim deserunt modi vel ducimus repellendus vitae dolorem quo nihil unde amet fuga saepe labore molestiae ut velit.</p>
                </div>
            </div>
        )
    }
}


export default Post;

What I would like to know is, am I approaching this in the right way, and if not, which approach should I be looking into?

Any and all advice welcome!