React Basics - Master - Drilldown

 

React Basics: React Master/Drilldown Pages Using React Routing

Use case: Your application (SPA) needs a master page, like a category page with a bunch of products listed - let's say you did a search for "donuts" and you got a page with all of the available donuts listed. This is the master page.
When you click on a donut link, React will use the useParams hook to pass the clicked value from the URL down to the details page where a lookup will be performed and all of the details for that specific donut will be displayed.
This code has been liberated from https://scrimba.com/p/pMvMNS4/cPJNv2HE

App.js

If you put the React router Switch/Route code in the App.js file then the clicked link replaces the current component with the clicked component. (...vs putting the specific Switch/Route code on an interior component, thus displaying the clicked component onto the current component). The magic however is on the route path for the ServiceDetail link - the ":serviceId" is our _id value from the servicesData.js file and that gets assembled and passed down from the ServicesList.js file.
import React from "react"
import Header from "./components/Header"
import Home from "./pages/Home"
import ServicesList from "./pages/services/ServicesList"
import ServiceDetail from "./pages/services/ServiceDetail"

import {Switch, Route} from "react-router-dom"

function App() {    
    return (
        <div>
            <Header />
            
            <Switch>
                <Route exact path="/">
                    <Home />
                </Route>
                <Route exact path="/services" >
                    <ServicesList />
                </Route>
                <Route path="/services/:serviceId" >
                    <ServiceDetail />
                </Route>
            </Switch>
        </div>
    )
}

export default App


Header.js

A simple header section with the included links to home and services (services actually goes to the master page).
import React from "react"
import {Link} from "react-router-dom"

function Header() {
    return (
        <header>
            <ul>
                <li><Link to="/">Home</Link></li>
                <li><Link to="/services">Services</Link></li>
            </ul>
        </header>
    )
}

export default Header


Home.js

A simple home page, for the purposes of illustration.
import React from "react"

function Home() {
    return (
        <h1>Home Page</h1>
    )
}

export default Home


ServicesList.js

A simple list page for all of the services listed in this catalog. React sets up the drilldown page here with the link tag incorporating the "_id" value, which is parsed out using the .map method. Also, don't forget the key value in the iterator otherwise React will throw a warning!
import React from "react"
import servicesData from "./servicesData"
import {Link} from "react-router-dom"

function ServicesList() {
    const services = servicesData.map(service => (
        <h3 key={service._id}>
            <Link to={`/services/${service._id}`}>{service.name}</Link> - ${service.price}
        </h3>
    ))
    return (
        <div>
            <h1>Services List Page</h1>
            {services}
        </div>
    )
}

export default ServicesList


servicesData.js

The dummy data, json formatted, for the drilldown page display.
export default [
    {
        "name": "Lawn Mowing",
        "price": 30,
        "_id": "1",
        "description": "Have a carpet-like lawn without any work."
    },
    {
        "name": "Leaf Raking",
        "price": 50,
        "_id": "2",
        "description": "Remove those pesky dead tree parts from your property."
    },
    {
        "name": "Weeding",
        "price": 50,
        "_id": "3",
        "description": "Don't let the invaders ruin your yard."
    },
    {
        "name": "Sprinkler repair",
        "price": 100,
        "_id": "4",
        "description": "Keep your irrigation system top-notch."
    }
]


ServiceDetail.js

...finally, this page demonstrates the results on the drilldown page.
import React from "react"
import {useParams} from "react-router-dom"
import servicesData from "./servicesData"

function ServiceDetail(props) {
    const {serviceId} = useParams()
	//here is about the place where you'd do a services call to an API to lookup the selected id, 
	//but we're faking it for now with a simple Javascript find
    // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find
    const thisService = servicesData.find(service => service._id === serviceId)
    
    return (
        <div>
            <h1>Service Detail Page</h1>
            <h3>{thisService.name} - ${thisService.price}</h3>
            <p>{thisService.description}</p>
        </div>
    )
}

export default ServiceDetail



 
 
Link your website to this page! Copy and paste the URL below:
http://www.cfsnap.com/react/react-basics-master-drilldown/