ЯсноПонятно24

import React, { FC } from 'react'; import { useSelector } from 'react-redux'; import { useLocation } from 'react-router-dom'; import { getIngredientsSelector } from 'path/to/your/selector'; import { TIngredient } from 'path/to/your/types'; import { Preloader } from 'path/to/Preloader'; import { IngredientDetailsUI } from 'path/to/IngredientDetailsUI';

export const IngredientDetails: FC = () => { const location = useLocation(); const ingredients = useSelector(getIngredientsSelector); const ingredientToFind = location.pathname.replace('/ingredients/', '');

const ingredientData: TIngredient | undefined = ingredients.find( (ingredient) => ingredient._id === ingredientToFind );

if (!ingredientData) { return <Preloader />; }

return <IngredientDetailsUI ingredientData={ingredientData} />; };