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