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;
Related
i have a issue with my projec, i am doing everything just like the man of tutorial, but when i run the server, my http://localhost:3000/ show me nothing, there is not error, but neither do nothing.
All this hapenned when i imported the react-roter-dom and changed the App.js
from This
function App() {
return (
<div>
<h1>Hello world</h1>
</div>
);
}
export default App;
to this
import React from "react";
import { createRoot } from "react-dom/client";
import {
createBrowserRouter,
RouterProvider,
Route,
Link,
} from "react-router-dom";
import Login from "./pages/Login";
import Register from "./pages/Register"
const router = createBrowserRouter([
{
path: "/",
element: <div> This is home world!</div>,
},
]);
function App() {
return (
<div>
<RouterProvider router={router}> </RouterProvider>
</div>
);
}
export default App;
and it should at least show the message "this is home world"
Please help me, Because i dont know what is hapening, no show error but it doesn't do anything either
this is what i got
after the router dom
before put the router dom show me " hello world" with this
function App() {
return (
<div>
<h1>Hello world</h1>
</div>
);
}
export default App;
index.JS
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
dev console
App.js
import React from "react";
import { createRoot } from "react-dom/client";
import {
createBrowserRouter,
RouterProvider,
Route,
Link,
} from "react-router-dom";
import Login from "./pages/Login";
import Register from "./pages/Register"
const router = createBrowserRouter([
{
path: "/",
element: <div> This is home world!</div>,
},
]);
function App() {
return (
<div>
<RouterProvider router={router}/>
</div>
);
}
export default App;
the consolo show me these errors
I think you just didn't save the initial code. You might want to turn on autosave on your vs code. And use the normal react render method for your index and app files.
Index.js :
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<App/>,
document.getElementById('root'));
App.js:
import React from 'react'
const App = () => {
return (
<div>
<h1>GPT-3</h1>
</div>
)
}
export default App
Try to run this but save the code or turn on auto-save
I am doing React project with typescript form scratch, and for some reason, I can't get the App component to render. I know the file path is correct. The Error says: Module not found: Error: Can't resolve './App' in '/Users/michaelhorvilleur/Desktop/Codecademy/react-porfolio/src'
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
ReactDOM.render(<App />, document.getElementById("#root"));
import React, { useState } from "react";
const App = () => {
return (
<div>
<h1>App</h1>
</div>
);
};
export default App;
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import App from "./App.tsx";
const rootElement = document.getElementById("root");
const root = createRoot(rootElement);
root.render(
<StrictMode>
<App />
</StrictMode>
);
Make sure the App.js file is positioned in src folder
I've created a simple test program in React which displays a piece of text.
import React from 'react';
import componentClass from './components/componentClass';
export default function App () {
return (
<h1>example</h1>
)
}
What I'm trying to do now is take this example text and make it its own separate component. I've created a class component named componentClass where the example text is displayed.
import React, { Component } from 'react';
export default class componentClass extends Component {
render() {
return (
<h1>example</h1>
)
}
}
I'm then rendering this component in App.js.
import React from 'react';
import componentClass from './components/componentClass';
export default function App () {
return (
<componentClass />
)
}
The problem is that nothing is showing up so I'm confused as to why the component isn't being displayed. Below is my index.js file.
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
reportWebVitals();
You should be using PascalCase when naming React components
working fiddle
class ComponentClass extends React.Component {
render() {
return (
<h1>Component class</h1>
)
}
}
function App () {
return (
<ComponentClass />
)
}
ReactDOM.render(<App />, document.querySelector("#app"))
In React, ALl components should have the first letter capitalized which means you need to edit each time you mentioned componentClass and turn it into ComponentClass
Try wrapping your return in a react fragment like so:
return (
<>
<ComponentClass />
</>
)
Im new to react and am currently trying to render some components.
My problem is that only the parent Component is being rendered.
I also have child Components but react doesnt seem to recognize them?
This is my index where I am importing my App component.
import ReactDom from 'react-dom';
import React from 'react';
import App from './app';
function BuildApp() {
return (
<App />
);
}
ReactDom.render(<BuildApp />, document.body);
Here is my App component.
import React from 'react';
import Container from './components/bootstrap-components/Container';
import TopInfo from './components/TopInfo/TopInfo';
export default function App() {
return (
<Container>
<TopInfo />
</Container>
);
}
The only thing my App Component renders is Container Component not the TopInfo.
If I remove the Container component and only have TopInfo, React will render TopInfo.
Refer to React children.
function Container(props) {
return (
<div>
{props.chilidren}
</div>
);
}
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'