React - nie może wyrenderować obiektu ponieważ dostał obiekt.

Cześć
Od wczoraj uczę się reacta. Niestety mam błąd którego nie umiem przeskoczyć samemu, a według publikacji które czytam ładnie powinno to działać.
W pliku Generator.js:

var Products = require('./Products');

var Generator = React.createClass({

    render(){
        return(
            <div className="products">
                <Products />
            </div>
        );
    }
});

module.exports = Generator;

Plik Products.js:

class Products extends Component {
    render(){
        var items = ['Kawa', 'Cola', 'Cokolwiek'];

        var products = items.map(function(item, i){
        	<li>item</li>
        });

        return (
            <ul>
                {products}
            </ul>
        )
    }
}

export default Products;

Według dokumentacji coś takiego powinno bez problemu działać, jednak niestety wywala mi taki błąd:

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of Generator.

Z góry dziękuję za wszelką pomoc :)

Na https://facebook.github.io/react/docs/react-without-es6.html są takie przykłady:

class Greeting extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

var createReactClass = require('create-react-class');
var Greeting = createReactClass({
  render: function() {
    return <h1>Hello, {this.props.name}</h1>;
  }
});

Jak widać raz jest render() {, a raz render: function() {. Spróbuj zrobić tak jak w przykładach.

edit:
Chyba pudło ;]

Brakuje require('./Products').default; i w mapowaniu powinno byc

var products = items.map(function(item, i){
           return <li>item</li>
        });

zgubiles return

Według dokumentacji coś takiego powinno bez problemu działać, jednak niestety wywala mi taki błąd:

Element type is invalid: expected a string (for built-in components) or a class/function
(for composite components) but got: object. Check the render method of Generator.

Pierwsze co powinieneś zrobić w takiej sytuacji to dać do console.log to co zostało zwrócone z kolejnych komponentów, np.

render() {
  const result =  <div className="products">
        <Products />
   </div>;
  console.log(result);
  return result;
}

Albo w innych miejscach (nie musi być console.log, niektórzy używają debuggera z Chrome itp.). Bo bez tego, to z każdym problemem będziesz latał na forum albo męczył się godzinami. Jeśli jest napisane Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object to znaczy zapewne, że gdzieś zwróciłeś obiekt (jaki to obiekt? w którym miejscu?). Zresztą nawet ci napisał co masz sprawdzić: Check the render method of Generator.

SkodaFabia napisał(a):

Brakuje require('./Products').default; i w mapowaniu powinno byc

var products = items.map(function(item, i){
           return <li>item</li>
        });

zgubiles return

Dzięki!
Ale nie do końca rozumiem czemu potrzebował tam '.defaults'. Mógłbyś podesłać link do dokumentacji?

Nie rozumiem również tego returna. W innym pliku używam:

var lists = items.map((item) => 
            this.renderSquare(item)
        )

I tu wszystko działa bez problemu, mimo  że też jest w metodzie render()

Ale nie do końca rozumiem czemu potrzebował tam '.defaults'.

To różnica moduły ES6 kontra moduły CommonJS i tego jak są zwykle transpilowane i bundlowane.

Jak coś jest zadeklarowane w module ES6 przez export default to jeśli chce się użyć funkcji ala CommonJS require (zamiast import z ES6) to trzeba zwykle dać require('SCIEZKA').default;

NickOver napisał(a):

Nie rozumiem również tego returna. W innym pliku używam:

var lists = items.map((item) => 
            this.renderSquare(item)
        )

I tu wszystko działa bez problemu, mimo  że też jest w metodzie render()

Poczytaj sobie o arrow function, ogólnie jeśli masz tam pojedyncze wyrażenie nie ujęte w blok to masz tam niejawny return, wiec to:

const someFunction = function(a) { return a**2 }

i

const someFunction = a => a**2

To w zasadzie to samo.

Ale nie do końca rozumiem czemu potrzebował tam '.defaults'. Mógłbyś podesłać link do dokumentacji?

moduly uzywaja wzorca modulu, wiec niejawnie jest tworzony obiekt, nie funkcja, czy klasa, ktora wlasnie chciales eksportowac i uzywajac export default wyksportowales obiekt z wlasciwoscia o nazwie default, dlatego robisz require(cos).default,

var lists = items.map((item) =>
this.renderSquare(item)
)

Ta 'szczaleczka' do gory to tzw. arrow function, lukier skladniowy, ktory zachowuje sie jak ekspresja, tzn. ewoluuje do jakiejs wartosci, u ciebie bedzie to this.renderSquare(item). Jesli ewoluuje, to znaczy ze automatycznie zwraca jakas wartosc (nie potrzebujesz zatem return).

• ekspresja
  wyrazisty i sugestywny sposób wyrażania uczuć

Oj tak. Programowanie to wyraziste wyrazanie uczuc.

I tam jeszcze jest, że ekspresja "ewoluuje" ;)