0

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')
);
Mayank Shukla
  • 100,735
  • 18
  • 158
  • 142
lordlabakdas
  • 1,163
  • 5
  • 18
  • 33

1 Answers1

2

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

Kadi
  • 321
  • 3
  • 8
  • 1
    Correct. Class names as well. These should also start with a capital – Facyo Kouch Feb 13 '18 at 12:08
  • 1
    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](https://jsfiddle.net/rgwL5zcj/19/). – Andy Feb 13 '18 at 12:17