Simple react component is not rendering [duplicate]

Question

I am using ReactJS to author web pages. I am having difficulties integrating multiple React components into the same webpage. The code seems to compile successfully but I get a blank webpage when trying to serve the webpage.

The code is as given below:

import ReactDOM from 'react-dom';
import React, { Component } from 'react';

class form1 extends Component{
  render(){
    return(
        <div class="form">
            <form action="/result" method="post">
                <input type="text" name="place" />
                <input type="submit" />
            </form>
        </div>
    );
  }
}

class tester extends Component{
  render(){
    return(
        <div class="form">
            <form action="/result_tester" method="post">
                <input type="text" name="place_tester" />
                <input type="submit" />
            </form>
        </div>
    );
  }
}

class aggregator extends Component{
  render(){
    return(
    <div>
    <form1/>
    <tester/>
    </div>);
  }
}

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

Kadi · Accepted Answer · 2018-02-13 12:02:02Z

2

React component names have to begin with a capital letter. More detailed explanation can be found here.

answered Feb 13, 2018 at 12:02

Kadi

3513 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Facyo Kouch Over a year ago

Correct. Class names as well. These should also start with a capital

Andy Over a year ago

In addition to this, you'll get an error/warning because you're using class rather than className. Here's some demo code working with the corrections.

Collectives™ on Stack Overflow

Simple react component is not rendering [duplicate]

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related