Creating a new div for each data block in ReactJS using Redux

I am representing the data using redux in React. It gives a DIV for each block of data. I would like to separate each div, space in between each one, and create an accordion card with each div. I am not sure the best way of going about something like this, and using it with redux. The block of code is below.

import React, { Component } from "react";
// import ReactDOM from "react-dom";
import './'
import { connect } from 'react-redux'
// import { Card, Feed } from 'semantic-ui-react'
import {fetchDataSuccess} from "../../Redux/actions/dataAction";

class ResearchPage extends Component {
    componentDidMount() {

    render() {
        const { data } = this.props;

        return (
                <h1 className='page-title'>Record MetaData</h1>

                {{ id, _index, ContentTypeId}) => (
                    <div key={id} className="query-div">


const mapStateToProps = state => ({

const mapDispatchToProps = dispatch => ({
    fetchDataSuccess: () => fetchDataSuccess(dispatch)
export default connect(mapStateToProps, mapDispatchToProps)(ResearchPage);

38 thoughts on “Creating a new div for each data block in ReactJS using Redux”