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'
Related
Tried to transfer data from 2 components to one using the same method, but it is working only for 50%. There are 3 documents: App.js, Hort.js, Hord.js. Transfering from app.js to hort.js is working, but from hord.js to hort.js isn't. What could be the reason?
App.js:
import React from 'react'
import Hort from './Hort'
function App(props) {
const text1 = 'check1'
return (
<Hort test1={text1} />
);
}
export default App;
Hord.js:
import React from 'react'
import Hort from './Hort'
function Hord(props) {
const text2 = 'check2'
return (
<Hort test2={text2} />
);
}
export default Hord;
Hort.js:
import React from 'react'
import App from './App'
import Hord from './Hord'
function Hort(props) {
return (
<div>
<h1>Just {props.test1}</h1>
<h2>Just {props.test2}</h2>
</div>
)
}
export default Hort;
You are never rendering <Hord>, if a component is never rendered, it won't render what's inside it.
In your index.js, you probably have code that looks like this:
import { StrictMode } from "react";
import ReactDOM from "react-dom";
import App from "./App";
const rootElement = document.getElementById("root");
ReactDOM.render(
<StrictMode>
<App />
</StrictMode>,
rootElement
);
This code indicates that the <App> component will get rendered in the root element from your index.html.
So starting from the <App> component, you can build your component tree, because you never call <Hord>, it will never render, nor will the components rendered inside <Hord>.
Render <Hord> inside your <App> component.
import React from 'react'
import Hort from './Hort'
import Hord from './Hord'
function App(props) {
const text1 = 'check1'
return (
<Hort test1={text1} />
<Hord />
);
}
export default App;
As mentioned in the comments, you shouldn't import components that could cause infinite loops.
import React from 'react'
// * removed imports
function Hort(props) {
return (
<div>
<h1>Just {props.test1}</h1>
<h2>Just {props.test2}</h2>
</div>
)
}
export default Hort;
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";
i have been working smoothly with tutorial on reactjs i came to realized that i couldn't see my output because ReactDom is not define says the compiler.
ine 142:1: 'ReactDOM' is not defined no-undef
Search for the keywords to learn more about each error.
import React, { Component } from 'react';
import logo, { ReactComponent } from './logo.svg';
import './App.css';
import ReactDom from "react-dom";
class Garage extends React.Component {
render() {
return (
<div>
<h1>Who lives in my Garage?</h1>
</div>
);
}
}
ReactDOM.render(<Garage />, document.getElementById('root'));
please how can this be solve
Change this line ReactDom to ReactDOM on the top where you import from 'react-dom'. That should work.
I have this code, and it is very good working on other environment without webpack.
This is main.js on frontend
import ReactDOM from "react-dom";
import React from "react";
//import { Router, Route, hashHistory } from 'react-router';
import { BrowserRouter, Route } from "react-router-dom";
import App from "./components/App.jsx";
import WizardIndex from "./components/index.js";
ReactDOM.render(
<BrowserRouter>
<App>
<Route path="/signup" component={WizardIndex} />
</App>
</BrowserRouter>,
document.getElementById("mount-point")
);
This is App.jsx
import React from "react";
import { Link } from "react-router-dom";
class App extends React.Component {
render() {
const { children } = this.props;
return (
<div className="App">
<div className="menu-bar">
<div className="menu-item">
<h3>App</h3>
<Link to="/signup">Signup</Link>
</div>
<div className="content">{children}</div>
</div>
</div>
);
}
}
export default App;
And Here I include WizardIndex file index.js
import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import { Values } from "redux-form-website-template";
import store from "./store";
import showResults from "./showResults";
import WizardForm from "./WizardForm";
class WizardIndex extends React.Component {
render() {
return (
<h1>
Hello!!!React Router
</h1>
);
}
}
export default WizardIndex;
I see Signup link - button on the localhost:8050 But, Why
Why I can not see nothing after I press Signup button
I didnt have any error No in console webpack (there is all green ) Not in console of browser And when I reload the page localhost:8050/signup I get this note in browser but not in consol Cannot GET /signup
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.