Develop Reference

How to solve ReactJS error in basic component

I have the following error:
src/Components/navbar.jsx
import React, { Component } from "react-dom";
class NavbarComponent extends Component {
state = {};
render() {
return (
<div>
<nav>This is nav</nav>
</div>
);
}
}
export default NavbarComponent;
src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import * as serviceWorker from './serviceWorker';
import NavbarComponent from './components/navbar';
ReactDOM.render(<NavbarComponent />, document.getElementById("root"));
serviceWorker.unregister();
This is showing up error to me. Can somebody please tell me how to resolve this?

You are importing the component from react-dom instead you should do it from react instead.
import React, { Component } from "react";

./src/App.js Line 6:19: 'Component' is not defined no-undef

I need help please.
import React from 'react';
import logo from './logo.svg';
import './App.css';
import Greet from './components/Greet'
class App extends Component {
render(){
return(
<div className="App">
<Greet/>
</div>
);
}
}
export default App;
I am facing this error when I run the code:
./src/App.js
Line 6:19: 'Component' is not defined no-undef
What should I do?
Thanks in advance!

Because you forget to import component from react.
Add this line on top of the program
import React, { Component } from 'react';

How to render component inside other component with React

So currently I'm trying to start a react app, and create my own components.
Inside TimeChooser.js
import React from 'react';
function timeInput(){
return(
<div>
<p>Test</p>
<input type='time'></input>
</div>
)
}
class TimeChooser extends React.Component {
render(){
return (
<div className='TimeChooser'>
<h2>Choose what time you want to play pool</h2>
<timeInput/>
</div>
);
}
}
export default TimeChooser;
Inside Index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import TimeChooser from './TimeChooser';
import registerServiceWorker from './registerServiceWorker';
ReactDOM.render(<div>
<App />
<TimeChooser />
</div>, document.getElementById('root'));
registerServiceWorker();
So Currently, when I go to the main page on my app, TimeChooser will render on the page, but the timeInput() will not, I'm pretty new to React and JS in general, sorry if this is a dumb question or I missed something.
UPDATE
Nevermind! I'm an idiot and the component needs to be capitalized like
TimeInput() and <TimeInput/>

React component not rendering

Embarrassing question, but here we go.
I have a layout.js file that is supposed to render out my React components.
Layout.j:s
import React, { Component } from 'react'
import MainNavbar from './Navbar'
import AddButton from './AddButton'
export default class Layout extends Component {
render() {
return (
<div>
<Navbar />
<AddButton />
</div>
)
}
}
The Navbar component works fine, but my AddButton wont display at all. I've tried console.log-ging from it and nothing gets outputted in the console. So I guess my problem has to do with my component not getting linked.
Here's the file that won't get displayed:
AddButton.js:
import React, { Component } from 'react'
import { Button } from 'react-bootstrap'
export default class AddButton extends Component {
render() {
console.log('hejsan')
return (
<div>
helloooooo
</div>
)
}
}
Here is the index.js file:
index.js
import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import Layout from './components/Navbar'
const app = document.getElementById('root')
ReactDOM.render(<Layout />, app)
I bet my problem is super basic, but I have no idea how to resolve this.
Thanks for reading!

So the mistake is very basic, you have imported Layout from Navbar which is nothing but your Navbar component and hence only Navbar is rendered, rather you should have imported it from Layout.js
import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import Layout from './components/Layout'
const app = document.getElementById('root')
ReactDOM.render(<Layout />, app)
Also in Layout.js change
import MainNavbar from './Navbar'
to
import Navbar from './Navbar'

'render' is not defined when running create react app

When I am using create react app when compliling I get the following errors ./src/Grid.js
"Line 3: Your render method should have return statement" and "Line 5: 'render' is not defined"
this is the contents of the the Grid.js file
import React, { Component } from 'react';
class Grid extends Component {
render(){
return <p>Hello, World</p>;
}
}
export default Grid;
I can't see that is wrong here? any help appreciated
import React, { Component } from 'react';
import Grid from './Grid.js';
class App extends Component
{
render()
{
return(
<div>
<Grid />
</div>
);
}
}
export default App;
This is where I am using the component
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();
Where ReactDOM render is used

You are missing import {render} from 'react-dom';.

It should be:
import React, { Component } from 'react';
class Grid extends Component {
render(){
return(<p>Hello, World</p>);
}
}
export default Grid;
The above quote no longer applies.
I tried your exact code for Grid.js and App.js from the question and it works well on my machine. Whatever reason why your thing isn't working isn't in your Grid.js or App.js.

Still no real explanation for this. Copying the component code in to a newly created file compiles correctly. Very strange indeed.