React-Redux: Displaying data from the initial state in components

Question

I am new to React/Redux, and I am working on a React application. I have the following component:

request.jsx:

import React, { Component } from 'react';

import './request.styles.scss';

class Request extends Component {
    render() {
        return (
            <div class="request-box">
                <div class="request-details">
                    <div>
                      <h1>Table 8, 3:00PM</h1>
                      <h2>Request made 5 min ago.</h2>
                    </div>
                    <div class="status-button">
                        <button type="button" class="request-button">Assistance Requested</button>
                    </div>
                </div>
            </div>
        ); 
    }
}

export default Request;

This component is displayed in the following page:

requests-page.jsx

import React from 'react';
import { connect } from 'react-redux';

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

import './requests.scss';

function RequestListPage (props) {
    return (
        <div className="requests-page">
            <h1>Requests</h1>
            <div className="requests-container">
                {props.requests ? props.requests.map(request => <Request />) : null}
            </div>
        </div>
    )
}

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

export default connect(mapStateToProps)(RequestListPage);

In my Redux folder, I have the following code:

requests.data.js:

export default [
    {
        "id": 9,
        "description": "Need assistance with the bill",
        "status": "Completed"
    },
    {
        "id": 2,
        "description": "Need assistance with ordering",
        "status": "Assistance Requested"
    },
    {
        "id": 4,
        "description": "Need assistance with the bill",
        "status": "Assistance Requested"
    }]

requests.reducer.js:

import INITIAL_STATE from './requests.data';
import { EDIT_REQUEST_STATUS } from './requests.types';

export default (state = INITIAL_STATE, action) => {
    switch (action.type) {
        case EDIT_REQUEST_STATUS:
            return state;
        default:
            return state;
    }
}

rootReducer.js:

import userReducer from './user/user.reducer';
import requestsReducer from './requests/requests.reducer'

export default combineReducers({
    user: userReducer,
    requests: requestsReducer
})

I want my application render the information requests.data.js in my Requests page. At the current moment, I have hardcoded information in the code for the Request component in request.jsx , so that all the Request components on the page display the same information.

I want to replace this hardcoded information so that each request displays its own unique id, description and status. But I am not sure what the best way to do this is. Any insights are appreciated.

Answer 1

well if I got you right, all you need is to pass your request as a prop to your Request component, meaning: in your "requests-page.jsx":

import React from 'react';
import { connect } from 'react-redux';

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

import './requests.scss';

function RequestListPage (props) {
    return (
        <div className="requests-page">
            <h1>Requests</h1>
            <div className="requests-container">
                {props.requests ? props.requests.map(request => <Request request={request}/>) : null}
            </div>
        </div>
    )
}

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

export default connect(mapStateToProps)(RequestListPage);

and in your "request.jsx:":

import React, { Component } from 'react';

import './request.styles.scss';

class Request extends Component {
    render() {
        return (
            <div class="request-box">
                <div class="request-details">
                    <div>
                      <h1>Table{this.props.id}, 3:00PM</h1>
                      <h2>{this.props.description}</h2>
                    </div>
                    <div class="status-button">
                        <button type="button" class="request-button">{this.props.status}</button>
                    </div>
                </div>
            </div>
        ); 
    }
}

  Request.defaultProps = {
  id: "8",
  description: "Request made 5 min ago.",
  status:"Assistance Requested"

};
export default Request;