Develop Reference

How to implement custom components in React?

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 />
</>
)

Why do my props not work in grandchild component?

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;

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'

React component not rendering with React Router

I am having some trouble with a component not rendering after following its route. The routes are created in a parent component Drawings, and send a couple of props to Drawing components.
When I click the link, I get to the correct path, for example, /drawing/20170724, and the log statement I have in the render function runs. I also get the props, so far so good. However, the return doesn't happen, so the HTML I need isn't available.
Here is Drawings where the routes and links are created:
import React, { Component } from "react";
import { Route, Link } from "react-router-dom";
import AnimatedWrapper from "../modules/AnimatedWrapper";
import Drawing from '../components/Drawing';
class DrawingsComponent extends Component {
render() {
const drawings = this.props.drawings;
const drawingsMap = this.props.drawingsMap;
return(
<div>
<div className="page">
<div className="drawings-list">
{
drawings.map((drawing) => {
return(
<Link to={`/drawing/${drawing.date}`} key={drawing.date}>
<div className="drawing-thumb">
<h2>{drawing.date}</h2>
</div>
</Link>
)
})
}
</div>
{
Object.keys(drawingsMap).map((d, i) => {
return <Route path={`/drawing/${drawings[i].date}`} render={(props) => (<Drawing drawingPkg={drawingsMap[d]} drawingInfo={drawings[i]} {...props} />)} key={`${drawings[i].date}`}/>
})}
</div>
</div>
)
}
}
const Drawings = AnimatedWrapper(DrawingsComponent);
export default Drawings;
And here is Drawing:
import React, { Component } from 'react';
import AnimatedWrapper from "../modules/AnimatedWrapper";
class DrawingComponent extends Component {
render() {
const drawing = this.props.drawingPkg;
const drawingInfo = this.props.drawingInfo;
console.log('gonna draw now');
return(
<div className="drawing">
<h2 className="drawing-title">{drawingInfo.title}</h2>
<canvas></canvas>
</div>
)
}
}
const Drawing = AnimatedWrapper(DrawingComponent);
export default Drawing;
I can't figure out why the Drawing component isn't returning.

What you are doing is wrong. You change the URL when the link is clicked. Then you have to give routes configuration, that tells react router which component to render when the URL changes. It should be something like this inside your index.js file.
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import promise from 'redux-promise';
import reducers from './reducers';
import Drawing './components/drawing_component';
const createStoreWithMiddleware = applyMiddleware(promise)(createStore);
ReactDOM.render(
<Provider store={createStoreWithMiddleware(reducers)}>
<BrowserRouter>
<div>
<Switch>
<Route path="/drawings/:date" component={Drawing} />
<Route path="/" component={IndexComponent} />
</Switch>
</div>
</BrowserRouter>
</Provider>
, document.querySelector('.container'));
I think what is wrong here is your routes config. I have never seen route config is given like the way you do.
Then write a separate Drawing component which renders a given drawing instance.
With this change your Link should be like this.
<Link to={`/drawing/${drawing.date}`}>
{drawing.date}
</Link>
The bottom line is this. Here you give some text with a hyperlink. Upon clicking this router changes the URL as in your case now. Then it uses router config to render the relevant component.