Issue-945-dynamic-route-play-failed-to-render (reactplay#946)

* issue 945, fixed by adjusting property location

* lint fix

src/plays/dynamic-routes/DynamicRoutes.jsx

@@ -16,13 +16,13 @@ function DynamicRoutes(props) {
  const activeRecipes = data.filter((recipe) => {
  return recipe.mealtype === activeMenu; // filter reciepes based on active menu
  });
- const mealType = [];
+ const mealTypes = [];
  data.map((recipe) => {
- return mealType.push(recipe.mealtype); // push meal categories to an array
+ return mealTypes.push(recipe.mealtype); // push meal categories to an array
  });
 
  // eliminate duplicate categories so we can render a navbar of uniq categories
- const uniqMealType = [...new Set(mealType)];
+ const uniqMealTypes = [...new Set(mealTypes)];
 
  const activeMenuHandler = (mealtype) => {
  setActiveMenu(mealtype);
@@ -44,7 +44,7 @@ function DynamicRoutes(props) {
  <Navbar // passing unique meal type to render on the navbar
  activeMenu={activeMenu} // a clickhandler that will reset the active menu
  activeMenuHandler={activeMenuHandler}
- mealtype={uniqMealType}
+ mealtypes={uniqMealTypes}
  />
  </div>
 

src/plays/dynamic-routes/Navbar.jsx

@@ -3,22 +3,23 @@ import { NavLink, useParams } from 'react-router-dom';
 
 function Navbar(props) {
  const { username, playname } = useParams();
- const [mealTypes, activeMealHandler, activeMenu] = Object.values(props);
+ const [activeMenu, activeMealHandler, mealTypes] = Object.values(props);
 
  return (
  <div className="navbar">
- {mealTypes.map((mealtype, index) => {
- return (
- <NavLink
- className={`navbar-link ${mealtype === activeMenu ? 'active' : ''}`}
- key={index}
- to={`/plays/${username}/${playname}/${mealtype}`}
- onClick={() => activeMealHandler(mealtype)}
- >
- {mealtype}
- </NavLink>
- );
- })}
+ {mealTypes &&
+ mealTypes.map((mealtype, index) => {
+ return (
+ <NavLink
+ className={`navbar-link ${mealtype === activeMenu ? 'active' : ''}`}
+ key={index}
+ to={`/plays/${username}/${playname}/${mealtype}`}
+ onClick={() => activeMealHandler(mealtype)}
+ >
+ {mealtype}
+ </NavLink>
+ );
+ })}
  </div>
  );
 }