React - User-Defined Jsx Components Not Rendering

React - User-Defined JSX Components Not rendering

You component name must begin with an Uppercase character since those beginning with lowercase are searched as default DOM elements like div, p, span etc. Which is not the case for your statisticsPage component. Make it uppercase and it works fine.

According to the docs:

When an element type starts with a lowercase letter, it refers to a
built-in component like or and results in a string 'div'
or 'span' passed to React.createElement. Types that start with a
capital letter like <Foo /> compile to React.createElement(Foo) and
correspond to a component defined or imported in your JavaScript file.

We recommend naming components with a capital letter. If you do have a
component that starts with a lowercase letter, assign it to a
capitalized variable before using it in JSX.

const View = () => (    <div>     <h1>Reports</h1>   <StatisticsPage />    </div>);

var StatisticsPage = React.createClass({  getInitialState: function() {     return {info: "loading ... "};  },  componentDidMount: function() {     this.requestStatistics();  },  render: function() {    return (        <div>info: {this.state.info}</div>    );  },  requestStatistics:function(){        console.log('here');        this.setState({info:1})        console.log('works!!')      
    }
  })
ReactDOM.render(<View/>, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

Components in react are not rendering

Your Navlink is working but you put this <Redirect to='/' /> code at the end of your index component that causes to redirect to the first page. if you remove it, your problem will solve.
but I prefer to use bootstrap or reactstrap

<div className="App">
      <NavContext.Provider value={value}>
        <div style={{ width: '100%', overflow: 'hidden' }}>
          <div style={{ width: '100px', float: 'left' }}>
            <Navbar />
          </div>
          <div style={{ marginLeft: '100px' }}>
            <Container
              stickyNav={<RightNavbar />}
              content={
                <Switch>
                  <Route path="/" exact component={Dashboard} />
                  <Route path="/usage" exact component={Usage} />
                  <Route path="/plan" exact component={Plan } />
                  <Route path="/documentation" exact
                  component={Documentation } />
                  <Route path="/invoices" exact component={Invoices } />
                </Switch>
              }
            />
          </div>
        </div>
      </NavContext.Provider>
    </div>

Simple React component not rendering

JSX expects component tags to be capitalized. Otherwise, it will just create a DOM element with the provided tag. See HTML Tags vs. React Components.

<map /> compiles to React.createElement("map", {}); while <Map /> compiles to React.createElement(Map, {});.

Just rename map to Map and you're good.

Component won't render in react

Custom components should always start with a capital letter(Pascal case). All components starting with small letter will be treated as react's built-in components rather than user defined or Custom ones.

Try changing buttonGroup to ButtonGroup and check it.

Also in buttonGroup class, you are using a countClick method which is not defined. If you are looking to use App components countClick method, you should probably do this.props.countClick and pass it to ButtonGroup as a prop like <ButtonGroup countClick = {this.countClick} />

---

Related Topics