CODEWITHSUNDEEP
reactjsonsen-ui
Jose
Jose

Reputation: 136

React render Onsen UI Toolbar

I’m new to React and to Onsen UI, I trying to use this code render a Toolbar on Page inside a Navigator element, but I only can see rendered the Button and the Hello World div. can anyone tell me what I’m doing wrong?.

import React from "react";
import ReactDOM from "react-dom";
var ons = require("onsenui");
var Ons = require("react-onsenui");

class App extends React.Component {

    renderToolbar() {
      return (
        <Ons.Toolbar>
          <div className="center">Onsen UI</div>
        </Ons.Toolbar>
     );
    }

    renderPage(){
      return (
        <Ons.Page renderToolbar={this.renderToolbar}>
          <div>
            Hello World!
          </div>
          <Ons.Button>
            Push Page
          </Ons.Button>
        </Ons.Page>
      );
    }

    render() {
      return (
        <Ons.Navigator
          swipeable
          renderPage={this.renderPage}
          initialRoute={{
            title: "First page"
          }}
        />
      );
    }
}

ReactDOM.render(<App />, document.getElementById('root'));

Upvotes: 0

Views: 485

Answers (1)

Guillermo Guti&#233;rrez
Guillermo Guti&#233;rrez

Reputation: 17839

Maybe you are missing to import the styles. Try to add them:

import 'onsenui/css/onsenui.css';
import 'onsenui/css/onsen-css-components.css';

Also you can import Onsen components using ES6 syntax:

import * as Ons from 'react-onsenui';

Upvotes: 1

Related Questions