Renderowanie danych z tablicy do propsów problem

Question

Witam mam problem z wyrenderowaniem obiektów z tablicy do propsów.

Posiadam taką tablice:

import Rice from '../src/assets/images/00RICEGUIDE8-articleLarge.jpg'

export const data = [
        {
            dishHeader: 'Ryż',
            MainDishImage: Rice,
        },
    ]

rekordy z tych tablic renderują się prawidłowo ale chciałbym wyrenderować jeszcze jednego propsa ale posiada on więcej niż jedną wartość jak mam to zapisać w tablicy aby to jednego propsa przekazać więcej niż jedną wartość ? Tak ?

{
            dishHeader: 'Ryż',
            MainDishImage: Rice,
            listParagraph: {
                'Cebula',
                'Jabłko',
                'Sól',
            }
        },

Proszę o pomoc

Answer 1

W java script masz dwa typy w których możesz przechowywać wiele wartości. Obiekty i Tablice.

Obiekty zapisujesz poprzez {} a tablica poprzez []

W obiektach kazda wartośc musi mieć swój klucz (swoją nazwe)

W tablicach wypisujesz wartości po sobie i sa one numerowane od 0 w góre.

Wydaje mi się ze chodzi Ci o coś takiego :

{
            dishHeader: 'Ryż',
            MainDishImage: Rice,
            listParagraph: [
                'Cebula',
                'Jabłko',
                'Sól',
            ]
},

 

Comments

Tablica w obiekcie którą podałeś u góry działa. Ale mam kolejny problem w moim projekcie w React.js. Stosując taki zapis wartości tablicy rendenderują się w jednym znaczniku w tym przypadku jest to <p> i poprostu zapisują się jako słowo po słowie w tym przypadku "CebulaJabłkoSól". Chciałbym aby każda wartość renderowała mi osobny element listy zapisany tak 

<li>
        <div>
            <img src={Icon} /><p>{listParagraph}</p>
        </div>
    </li>

o ile elementy takie jak dishHeader i MainDishImage renderują się prawidłowo bo są pojedyńcze tak listParagraph już nie bo cała zawartość renderuje się do jednego znacznika a nie tak że każdy element renderuje mi osobny element listy :(

---

Musisz zmienić tablice możesz to zrobić tak (rekomendowane) : 

<img src={Icon} />{listParagraph.map((paragraph) => <p>{paragraph}</p>)}

lub od razu w tablicy użyć JSXa (nie rób tak! to tylko ciekawostka) 

{
            dishHeader: 'Ryż',
            MainDishImage: Rice,
            listParagraph: [
                 <p>{'Cebula'}</p>,
                 <p>{'Jabłko'}</p>,
                 <p>{'Sól'}</p>,
            ]
},

 

---

Tylko że ten zapis generuje mi znaczniki <p> i wygląda to tak:

A chciałbym żeby wyrenderowała się struktura którą podałem w poprzednim poście:

<li>
        <div>
            <img src={Icon} /><p>Cebula</p>
        </div>
    </li>

<li>
        <div>
            <img src={Icon} /><p>Jablko</p>
        </div>
    </li>

<li>
        <div>
            <img src={Icon} /><p>Sól</p>
        </div>
    </li>

Czy da radę jakoś to zrobić ? :D

---

Może chodzi ci o to ?

<img src={Icon} /><p>{listParagraph.join(', ')}</p>

 

---

Chyba ze to ma być tak ? 

<React.Fragment>
{listParagraph.map((paragraph) => <li>
        <div>
            <img src={Icon} /><p>{paragraph}</p>
        </div>
    </li>
)}
</React.Fragment>

 

---

Działa :D  Rozumiem że metoda map mapuje mi wszystkie elementy z klucza listParagraph tak ? A na jakiej zasadzie każda ta wartość renderuje mi osobną strukture znaczników ?

Tak apropos tutaj wyrenderowałem sobie DishHeader i MainDishImage w rodzicu. Rozumiem że listParagraphs mam zmapować w elemencie dziecka tak ?

class App extends React.Component {
    render() {
        return (
            <div>
            {data.map(item =>(
                <HeroImage {...item} />
            ))}
            </div>
        )
    }
};

export default App;

ListItem.js jest dzieckiem ListWrapper które jest dzieckiem HeroImage

ListItem.js

<React.Fragment>
{listParagraph.map((paragraph) => <li>
        <div>
            <img src={Icon} /><p>{paragraph}</p>
        </div>
    </li>
)}
</React.Fragment>