Mern Restaurant Review Card not displaying

For some reason, I keep on having problems trying to display the cards that contain information about each restaurant onto the page… It clearly shows that it managed to get all the cuisines and restaurant info from the server… I initially had problems with the map function, and I solved it using conditional rendering, but it still didn’t show anything. And I also had problems with the unique key and I put that in as well… There’s too much code to show here so I have linked the github repository for this project!

Mern Restaurant Review Repository

Here is the RestaurantList.js file code:

import React, { useState, useEffect } from 'react';
import RestaurantDataService from "../services/restaurant"
import { Link } from "react-router-dom";

const RestaurantsList = props => {
    const [restaurants, setRestaurants] = useState([]);
    const [searchName, setSearchName] = useState("");
    const [searchZip, setSearchZip] = useState("");
    const [searchCuisine, setSearchCuisine] = useState("");
    const [cuisines, setCuisines] = useState(["All Cuisines"]);

    // After rendering
    useEffect(() => {
        retrieveRestaurants();
        retrieveCuisines();
    }, []);

    const onChangeSearchName = e => {
        const searchName = e.target.value;
        setSearchName(searchName);
    };

    const onChangeSearchZip = e => {
        const searchZip = e.target.value;
        setSearchZip(searchZip);
    };

    const onChangeSearchCuisine = e => {
        const searchCuisine = e.target.value;
        setSearchCuisine(searchCuisine);
    };

    const retrieveRestaurants = () => {
        RestaurantDataService.getAll()
            .then(response => {
                console.log(response.data);
                setRestaurants(response.data.restaurants);
            })
            .catch(e => {
                console.log(e);
            })
    };

    const retrieveCuisines = () => {
        RestaurantDataService.getCuisines()
            .then(response => {
                console.log(response.data);
                setCuisines(["All Cuisines"].concat(response.data));
            })
            .catch(e => {
                console.log(e);
            })
    };

    const refreshList = () => {
        retrieveRestaurants();
    };
    
    const find = (query, by) => {
        RestaurantDataService.find(query, by)
            .then(res => {
                console.log(res.data);
                setRestaurants(res.data.restaurants);
            })
            .catch(e => {
                console.log(e);
            })
    };

    const findByName = () => {
        find(searchName, "Name");
    };

    const findByZip = () => {
        find(searchZip, "zipcode");
    };

    const findByCuisine = () => {
        if (searchCuisine === "All Cuisines") {
            refreshList();
        } else {
            find(searchCuisine, "cuisine")
        }
    };

    return (
        <div>
            <div className="row pb-1">
                <div className="input-group col-lg-4">
                    <input 
                        type="text" 
                        className="form-control"
                        placeholder="Search by name"
                        value={searchName}
                        onChange={onChangeSearchName}
                    />
                    <div className="input-group-append">
                        <button 
                            className="btn btn-outline-secondary"
                            type="button"
                            onClick={findByName}
                        >
                            Search
                        </button>
                    </div>
                </div>
                <div className="input-group col-lg-4">
                    <input 
                        type="text" 
                        className="form-control"
                        placeholder="Search by zipcode"
                        value={searchZip}
                        onChange={onChangeSearchZip}
                    />
                    <div className="input-group-append">
                        <button 
                            className="btn btn-outline-secondary"
                            type="button"
                            onClick={findByZip}
                        >
                            Search
                        </button>
                    </div>
                </div>
                <div className="input-group col-lg-4">
                    <select onChange={onChangeSearchCuisine}>
                        {cuisines.map(cuisine => {
                            return (
                                <option key={cuisine} value={cuisine}> {cuisine.substr(0, 20)} </option>
                            )
                        })}
                    </select>
                    <div className="input-group-append">
                        <button 
                            className="btn btn-outline-secondary"
                            type="button"
                            onClick={findByCuisine}
                        >
                            Search
                        </button>
                    </div>
                </div>
            </div>
            <div className="row">
                {restaurants && restaurants.map((restaurant) => {
                    const address = `${restaurant.address.building} ${restaurant.address.street}, ${restaurant.address.zipcode}`;
                    return (
                        <div key={restaurant._id} className="col-lg-4 pb-1">
                            <div className="card">
                                <div className="card-body">
                                    <h5 className="card-title">{restaurant.name}</h5>
                                    <p className="card-text">
                                        <strong>Cuisine: </strong>{restaurant.cuisine}<br/>
                                        <strong>Address: </strong>{address}
                                    </p>
                                    <div className="row">
                                        <Link to={"/restaurants/"+restaurant._id} className="btn btn-primary col-lg-5 mx-1 mb-1">
                                            View Reviews
                                        </Link>
                                        <a target="_blank" href={"https://www.google.com/maps/place" + address} className="btn btn-primary col-lg-5 mx-1 mb-1">View Map</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    )
                })}
            </div>
        </div>
    );
};

export default RestaurantsList;

What other trouble shooting have you done?

For example. I would replace the return for the component with:

return <h1>howdy</h1>

just to confirm that the component can get that far.

If that worked, I’d log out cuisines and make sure it is an array. Then in the callback for the map, I’d log out each of the elements.

If that didn’t lead to the answer, I’d rip out (or comment out) the guts of that component and rebuild it piece by piece until I found where the problem was.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.