I am working on a React application and I am using Redux to store the state. I have the following code:

requests.data.js:

```
export default {
    requests: [
        {
            "id": 9,
            "timestamp": Date.now(),
            "description": "Need help with ordering",
            "status": "Completed"
        },
        {
            "id": 2,
            "timestamp": Date.now(),
            "description": "Need help with ordering",
            "status": "Assistance Requested"
        },
        {
            "id": 4,
            "timestamp": Date.now(),
            "description": "Need help with ordering",
            "status": "Assistance Requested"
        },
        {
            "id": 7,
            "timestamp": Date.now(),
            "description": "Need help with ordering",
            "status": "Assistance Requested"
        }   
    ]
}

```

I have the following Request component.

request.component.jsx:

```
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { changeRequest } from '../../redux/requests/requests.actions';
import './request.styles.scss';

class Request extends Component {

    handleClick = (id, status) => {
        this.props.changeRequest(id, status);
    }

    render() {
        return (
            <div className="request-box">
                <div className="request-details">
                    <div>
                        <h1>Table {this.props.id}, {this.props.timestamp}</h1>
                        <h2>{this.props.description}</h2>
                    </div>
                    <div className="status-button">
                        <button type="button" className="request-button" onClick={() => this.handleClick(this.props.id, this.props.status)}>{this.props.status}</button>
                    </div>
                </div>
            </div>
        )    
    }
}

const mapStateToProps = (state) => {
    return {
        requests: state.requests.requests
    }
}

const mapDispatchToProps = (dispatch) => {
    return {
        changeRequest: (id, status) => { dispatch(changeRequest(id, status)) }
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(Request);

```

This component is displayed in the following page.

requests.component.jsx:

```
import React, { Component } from 'react';
import { connect } from 'react-redux';
import Request from '../../components/request/request.component';
import './requests.styles.scss';

class RequestListPage extends Component {

    render() {
        const { requests } = this.props;
        const requestList = requests.length ? (
            requests.map(request => {
                return(
                    <Request request={request} key={request.id}/>
                )
            })
        ) : (
            <div>No requests yet.</div>
        )

        return (
            <div className="requests-page">
                <h1>Requests</h1>
                <div className="requests-container">
                    <div className="request-list">
                        {requestList}
                    </div>
                </div>
            </div>
        )
    }
}

const mapStateToProps = (state) => {
    return {
        requests: state.requests.requests
    }
}

export default connect(mapStateToProps)(RequestListPage);

```

In the above code, the RequestListPage component maps each request object from the state to a Request component, so that a Request component is concerned about a single Request and not a list.

However, when I run my application, I get the following:

[![enter image description here](https://i.stack.imgur.com/sw0UB.png)](https://i.stack.imgur.com/sw0UB.png)

The data in the Request component is not getting displayed. I am not sure why this is occurring. Any insights are appreciated.