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 />
</>
)
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;
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>
);
}
Hello i want to pass props from index.html to App.tsx as you see i'm using typescript. so i want to do it with typescript.
my code
//index.html
<div id="root" name="test"></div> //props name test
//Index.tsx
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
var container =document.getElementById('root');
ReactDOM.render(
<App name={container.getAttribute('name')} />
,
container
);
serviceWorker.unregister();
//i'm sorry i should have provided this my knowledge about typescript is very low
//App.tsx
import React from 'react';
import logo from './logo.svg';
import './App.css';
class App extends React.Component {
render(){
return (
<div className="App">
<p>{this.props.name}</p>
</div>
)
}
}
export default App;
You should add props to your App component constructor:
class App extends React.Component {
constructor(props) {
super(props);
}
render(){
I have this project structure
Sorry for question, I am new in React, I can't uderstand how I should call this code in ol-map.js
import React from "react";
import {
Map,
layer,
Layers
} from "react-openlayers";
class olMap extends React.Component {
render() {
return (
<div className="Map">
<Map view={{ center: [0, 0], zoom: 2 }}>
<Layers>
<layer.Tile />
</Layers>
</Map>
</div>
);
}
}
export default olMap;
in my Map.js page?
import React, {Component} from 'react';
import olMap from '../components/map/ol-test3/ol-map';
class Map extends Component {
render() {
return (
<olMap/>
);
}
}
export default Map;
P.S. This is index.js file and I have no idea why I need it.
import React from "react";
import ReactDOM from "react-dom";
import olMap from "./ol-map";
const rootElement = document.getElementById("root");
ReactDOM.render(
<React.StrictMode>
<olMap />
</React.StrictMode>,
rootElement
);
In your component .js, make sure you have
import React, { Component } from "react";
class OLMap extends Component {
And then
import OLMap from "./OLMap";
And of course check your folder structure
import OLMap from "../map/ol-test3/ol-map"
Name does not matter in default export so you can name whatever you want while importing.
I'm trying to use React Router 4.2.2 in order to load a component called PostFocus whenever I click on a 'Card' component, with a Link wrapped around it. When I click on a 'Card' the path changes correctly, but the PostFocus component isn't rendered. Have I done something wrong or missed something out in the Route? I can't figure it out.
Here is the code:
class PostsList extends React.Component {
render() {
var createCards = this.props.posts.map((post, i) => {
return (
<div key={i}>
<Link to={`/${post.id}`}>
<Card title={post.title} subtitle={post.subtitle} date={post.date} id={post.id}/>
</Link>
<Route exact path={`/${post.id}`} render={(post) => (
<PostFocus content={post.content}/>
)}/>
</div>
);
});
return (
<div>
{createCards}
</div>
);
}
App Component:
import React from 'react';
import PostsList from '../containers/posts_list.js';
import {withRouter} from 'react-router';
class App extends React.Component {
render() {
return(
<div>
<PostsList />
</div>
);
}
}
export default withRouter(App);
index.js code:
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import ReduxPromise from 'redux-promise';
import { BrowserRouter } from 'react-router-dom';
import App from './components/App.jsx';
import reducers from './reducers';
const createStoreWithMiddleware = applyMiddleware(ReduxPromise)(createStore);
ReactDOM.render(
<Provider store={createStoreWithMiddleware(reducers)}>
<BrowserRouter>
<App />
</BrowserRouter>
</Provider>
, document.getElementById('root'));
I was also facing the same problem. I fixed it with a trick.
You might have BrowseRouter in your App.js or index.js, I had it in my index.js like this :
ReactDOM.render(<BrowserRouter>
<App />
</BrowserRouter>, document.getElementById('root'))
I changed it to :-
ReactDOM.render((
<BrowserRouter>
<Route component={App} />
</BrowserRouter>
), document.getElementById('root'))
and it tricked, actually we are keeping the router look over our complete application by doing this, thus it also checks up with the routing path and automatically renders the view. I hope it helps.
Note:- Do not forget to import Route in your index.js
#Tom Karnaski
Hi... Sorry for the late reply, I was not getting time to work on it.. Your code is running in my system, I didn't had access to push a branch in your repo.. make your App.js like below.. it will work for sure..
import React from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom'
import Navbar from './Components/Navbar/Navbar';
class App extends React.Component {
render() {
return (
<Router>
<div className="App">
<Route component={Navbar}/>
</div>
</Router>
);
}
}
export default App;
I solved this problem simply use tag instead of Link helper. Not sure is it right or not, but it works for me, hope it will helps anybody else.