Need help in React Routing. (Personal Project)

Question

Hi everyone,

Just needed help on this personal project of mine. I wanted to render a Page not found when I entered a url that not available in an Object literal that I made.

This is the gallery where if I clicked in the "Read More" link, it should direct me to the specific food/recipe.

const Card = ({ data }) => {
  return (
    <li className="card-item">
      <img src={data.img_src} alt={data.title} />
      <span>
        <h3>{data.title}</h3>
        <p>{data.description.substring(0, 255) + "..."}</p>
        <NavLink to={`/recipie/${data.slug}`}>Read More</NavLink>
      </span>
      <Switch>
        <Route path={`/recipie/${data.slug}`} component={() => <Recipie />} />
      </Switch>
    </li>
  );
};

Somehow when I entered a wrong slug (ex /recipe/egg0a0123 ) which is not a slug of any of my object literals, It returns a blank page instead of a Page not found.

Here is my code for rendering the page. But I don't know where should I put the Render of Page not found.

const Recipie = ({ match }) => {
  let slug = match.params.slug;
  // console.log(Object.keys(Recipies).includes(slug));
  // if (Object.keys(Recipies).includes(slug)) {
  //   console.log("ohyeah!");
  // } else {
  //   return <NotFound />;
  // }
  let recepie = Recipies.filter(recepie => recepie.slug === slug).map(
    (recepie, key) => {
      return (
        <div className="recipie-container" key={key}>
          <div className="recipie-top">
            <div className="recipie-left">
              <h2>{recepie.title}</h2>
              <p>{recepie.description}</p>
              <p>
                <strong>Ingredients</strong>
              </p>
              <ul>
                {recepie.ingredients.map((ingredient, key) => {
                  return <li key={key}>{ingredient}</li>;
                })}
              </ul>
            </div>
            <div className="recipie-right">
              <img src={recepie.img_src} alt={recepie.title} />
            </div>
          </div>

          <div className="steps">
            <p>
              <strong>Steps</strong>
            </p>
            <ol>
              {recepie.steps.map((step, key) => {
                return <li key={key}>{step}</li>;
              })}
            </ol>
          </div>
        </div>
      );
    }
  );
  return <div>{recepie}</div>;
};

Here is the GitHub repo of the project. Sorry I haven't able to make it live yet.

https://github.com/owaaquino/Recipie-Viewer-App

Thank you very much!

Welcome to the Treehouse Community

Looking to learn something new?

Owa Aquino

Owa Aquino

Need help in React Routing. (Personal Project)