ReactJS: Rendering a list of request components

Question

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() {
        const { requests } = this.props;
        const requestList = requests.length ? (
            requests.map(request => {
            return (
                <div className="request-box" key={request.id}>
                    <div className="request-details">
                        <div>
                             <h1>Table {request.id}, {request.timestamp}</h1>
                             <h2>{request.description}</h2>
                        </div>
                        <div className="status-button">
                            <button type="button" className="request-button" onClick={() => this.handleClick(request.id, request.status)}>{request.status}</button>
                        </div>
                    </div>
                </div>
            )
        })
    ) : (
        <div>No requests yet.</div>
    )
        return (
            <div className="request-list">
                {requestList}
            </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 from 'react';
import { connect } from 'react-redux';

import Request from '../../components/request/request.component';

import './requests.styles.scss';


class RequestListPage extends React.Component {

    render() {
        return (
            <div className="requests-page">
                <h1>Requests</h1>
                <div className="requests-container">
                    <Request />
                </div>
            </div>
        )
    }
}


export default RequestListPage;

In request.component.jsx, I am mapping through the list of requests from the initial state and am storing them in a variable called requestList. Essentially, a Request component contains a list of requests.

I would like to change this code so that 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, I am not sure what the code in the Request component should be in this case. For example, I have the following code for the Request component:

request.componentnew.jsx:

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

class Request extends Component {

    render() {
        <div className="request-box">
            <div className="request-details">
                <div>
                    <h1>Table 1, 12:00PM</h1>
                    <h2>Need help with ordering</h2>
                </div>
                <div className="status-button">
                    <button type="button" className="request-button">Assistance Requested</button>
                </div>
            </div>
        </div>
    }
}

I know that I will have to move the mapStateToProps and the mapDispatchToProps functions to requests.component.jsx if I map through the request objects from the initial state there. However, since the information about each request object will be available in requests.component.jsx, what would I put in the Request component? For example, I have hardcoded information in request.componentnew.jsx, but I don't know what I should have in the Request component in request.component.jsx, if I am inserting information in each Request component through mapping through the request list in requests.component.jsx.

Any insights are appreciated.

Answer 1

Basically your request component will have the attributes that each object of your requestsList has.

What I mean is this:

{
   "id": 9,
   "timestamp": Date.now(),
   "description": "Need help with ordering",
   "status": "Completed"
}

So your request component will have these props mentioned above.

Then in your render function, you can directly render like this:

 //...code

requests.map(request => {
    return (
        <Request request={request} key={request.id}/>
    )

//...code

You can also individually pass the Props if you would not like the entire request object to be passed.

 //...code

requests.map(request => {
 return (
   <Request
   id={request.id}
   key={request.id}
   timestamp={request.timestamp}
   description={request.description}
   status={request.status}
   />;


//...code

Basically, whatever JSX you currently have in your map on requestsList, that will go into Request component.

Then in your Request component you can use the props like so:

render() {
        <div className="request-box">
            <div className="request-details">
                <div>
                    <h1>{this.props.timestamp}</h1> //using props
                    <h2>{this.props.description}</h2> //using props
                </div>
                <div className="status-button">
                    <button type="button" className="request-button">Assistance Requested</button>
                </div>
            </div>
        </div>
    }