Meteori andmete näitamine Reactis

Puhastan eelmise näite osa failist App.js:

import React, {Component} from 'react';
import { createContainer} from 'meteor/react-meteor-data';
import Items from '../api/Items';

class App extends Component {

  render () { //alati peab olema komponendi osa
    return ( // render funktsioon peab midagi tagastana, see on JSX
<div>
      <header>
        <h1>Hääletusäpp</h1>
      </header>
      <main>
        //siia tulevad andmed baasist
      </main>
</div>
    );
  }
}
//Wrapper  andmete lisamiseks klassile App
export default createContainer(() =>{
  return {
    items: Items.find({}).fetch()
  }
},App);

Lisan elemendi näitamiseks loodava komponendi jaoks eraldi faili Item.js:

import React, {Component} from 'react';
export default class Item extends Component {
  render() {
    return (
      <div>{this.props.item.asiYks.text}</div>
    )
  }
}

Item.js saab andmed props kaudu, mis saadetakse uuendatud App.js-st, kus on oluline Javascripti map funktsioon, mis tekitab andmebaasist saadud massiivist uue React.DOM-i elementide massiivi.

import React, {Component} from 'react';
import { createContainer} from 'meteor/react-meteor-data';
import Item from './Item';
import Items from '../api/Items';

class App extends Component {

  render () { //alati peab olema komponendi osa
    return ( // render funktsioon peab midagi tagastana, see on JSX
<div>
      <header>
        <h1>Hääletusäpp</h1>
      </header>
      <main>
        {this.props.items.map((item)=>{
        return <Item item={item} />
        })}
      </main>
</div>
    );
  }
}
//Wrapper  andmete lisamiseks klassile App
export default createContainer(() =>{
  return {
    items: Items.find({}).fetch()
  }
},App);

Lisan veel andmeid ning natuke kujundust-paigutust: