Teoretycznie prosty problem w React

Question

Próbuje przekazać liste ze state do wyrenderowania jej w ul.
Niestety przechodzi tylko h1 ktora pelnila tu role tylko poglądową, czy cokolwiek działa.

Prosiłbym o jakieś nakierowanie, dopiero się ucze i obawiam się, że strasznie to przekombinowałem...

Link z kodem:

https://pastebin.com/tysyhmjS

 

Answer 1

1) w state trzymasz obiekt który ma jeden klucz "list" a pod nim kryje się wartość "sok".

state = {
    list: "kebab",
    list: "cola",
    list: "sok"
  }

Jeśli chcesz zrobić tablicę zrób tak:

state = {
    list: ["kebab", "sok", "cola"]
  }

teraz w state.list kryje się tablica z tymi trzema rzeczami.

2) 

<ul><listItems name={this.state.list} /></ul>

const listItems = (props) => {
  return (
    <li>{props.name}</li>
  )
}

listItems zawsze zwróci tylko jeden element i będzie to jeden tag li. Jeśli chcesz wyświetlić je wszystkie zrób tak:

const listItems = (props) => {
  return (
    <>
       {props.list.map(item => (<li>{item}</li>))}
    </>
  )
}

i wtedy jako propsa do tego komponentu przekazujesz list a nie name. Jeśli chodzi o 

<></>

to to są fragmenty, możesz zwrócić więcej niż jeden root element bez opakowywania tego w span'y czy div'y

Comments

Dalej bd miał błąd przy tym rozwiązaniu :P 
https://stackoverflow.com/questions/30373343/reactjs-component-names-must-begin-with-capital-letters

---

na playground wgl nie szło, ale może to rzeczywiście efekt środowiska :P

---

Dziękuje CI bardzo za szczegółowe wyjaśnienie problemu.
Niestety porobiłem mnóstwo błedów podstawowych.
Dałem plusika i bardzo się ciezze, że zrobiłeś to z użyciem metody map() bo sam probowałem ale miałem problem z odpowiednią składnią.

---

Faktycznie musiałem jeszce zmienić w tym przypadku odwołanie z name na list.
ale jak zacząłem analizować to co napisał Milesq to od razu to wychwyciłem :)

Answer 2

Po pierwsze ten obiekt nie ma sensu. Obiekty mają unikatowe kluczę... to raczej powinno być
 

{
    list: [
        "kebab",
        "cola",
        "sok"
    ]
}

Ogólnie jak zmienisz nazwę na ListItem (usunąłem też s bo to jest pojedynczy item) to zadziała. Chodziło o dużą literę na początku.
Jednak w react mamy hooki i ja bym szedł w tym kierunku:
 

const ListItem = props => {
  console.log(props);
  return <li>{props.name}</li>;
}
const ShoppingList = () => {
  const [list, setList] = useState(["kebab", "cola", "sok"]);

  return (
     <>
        <h1>Lista zakupów</h1>
        <ul>
            {list.map(item => <ListItem name={item} />)}  
        </ul>
      </>
  );
}

ReactDOM.render(<ShoppingList />, mountNode)

Kod napisany na kolanie, ale działa i chyba jest poprawniejszy :P

 

Comments

Dzięki wielkie za odpowiedź i nakierowanie mnie gdzie mam jeszcze spore braki.
Więcej czasu zajeło mi sprawdzenie i zrozumienie tego co chciałeś przekazać niż zapewne Tobie samo pisanie.
Muszę jeszcze się poduczyć a propo tego co można stosować aby pisać schludniejszy i krótszy kod w React.
Oczywisćie plusik poszedl :)