React JS Problem z przekazaniem propsów do komponentu

Question

Witam mam problem z wyświetleniem danych wywołanych w komponencie rodzica za pomocą propsów. Zaimportowałem dane z  tablicy ale obrazki jak i "string" nie chcą mi się wyświetlać. Poniżej daje materiały aby lepiej zapoznać się z problemem.

Category.js

import React from 'react';


const Category = ({image, category}) => (
    <div>
    <img src ={image}/>
    <h2>{category}</h2>
    </div>
)

export default Category;

Następnie używam tego komponentu w MenuList.js

import React from 'react';
import Category from '../../Category/Category';


const MenuList = () => (
    <div>
    <li>
        <Category />
        <ul>
            <li>

            </li>
            <li>

            </li>
        </ul>
    </li>
    </div>
)

export default MenuList;

A na końcu wywołuje propsy zdeklarowane w Category.js które mają wyświetlić dane z zaimportowanej tablicy.

 

CardMenu.js

import React from 'react';
import { RecipeDesc } from '../../../data/RecipeDesc'
import MenuList from './MenuList/MenuList';


const CardMenu = () => (
    <div>
    <ol>
    {RecipeDesc.map(item =>(
        <MenuList />
    ))}
    </ol>
    </div>
)

export default CardMenu;

,a to plik z danymi

import dish from '../src/assets/images/meat.png';

export const RecipeDesc = [
    {
        category: 'main course',
        image: dish,
    },
    {
        category: 'main course',
        image: dish,
    },
    {
        category: 'main course',
        image: dish,
    },
    {
        category: 'main course',
        image: dish,
    },
    {
        category: 'main course',
        image: dish,
    },
    {
        category: 'main course',
        image: dish,
    },
    {
        category: 'main course',
        image: dish,
    },
    {
        category: 'main course',
        image: dish,
    },
]

W rezultacie zamiast obrazków i tekstu otrzymuje puste pola w liście.

Answer 1

{RecipeDesc.map(item =>(
        <MenuList />
))}

Nie przekazujesz tutaj w ogóle propsów to nic Ci nie wyświetla. 

 

{RecipeDesc.map(item =>(
        <MenuList item={item}/>
))}

I później w MenuList też musisz przekazać propsy do Category.

W tej chwili renderuje Ci po prostu 8 pustych pól, bo tyle ma tablica RecipeDesc.

 

Comments

Dzięki :D

---

Działa :D