Develop Reference

Reactjs How i can pass props from index.html to App component with Typescript

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(){

Reactjs challenge output can display on the browser

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.

You should not use <Route> or withRouter() outside a <Router>

I have wrapped my index.js file to support a Redux Store and React-Router-v4.
However, when I try to run a basic test, I get the following error message:
Invariant Violation: You should not use <Route> or withRouter() outside a <Router>
Here is what my index.js looks like:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { BrowserRouter } from 'react-router-dom';
import registerServiceWorker from './registerServiceWorker';
// Redux
import { Provider } from 'react-redux';
import store from "./store/index";
ReactDOM.render((
<Provider store={store}>
<BrowserRouter>
<App />
</BrowserRouter>
</Provider>
), document.getElementById('root'));
registerServiceWorker();
and here is my App.js:
import React, { Component } from 'react';
import { ScaleLoader } from 'react-spinners';
import { withRouter } from 'react-router';
import Header from './components/Header';
import Footer from './components/Footer';
import Main from './Main';
import './styles/styles.scss';
// Redux
import { connect } from 'react-redux';
import store from "./store/index";
import { isLoading } from "./actions/index";
class App extends Component {
constructor() {
super();
store.dispatch(isLoading(true));
}
componentDidUpdate(prevProps) {
if (this.props.location.pathname !== prevProps.location.pathname) {
store.dispatch(isLoading(true));
}
}
render() {
return (
<div className='App'>
<Header />
<div className='App__wrapper'>
<div className={'loading-spinner ' + (this.props.isLoading ? null : '--hide-loader')}>
<ScaleLoader
color={'#123abc'}
loading={this.props.isLoading}
/>
</div>
<Main />
</div>
<Footer />
</div>
);
}
}
const mapStateToProps = (state) => ({ isLoading: state.isLoading });
export default withRouter(connect(mapStateToProps)(App));
Since I'm using withRouter to wrap for navigation, is this method discouraged? Should I be setting up withRouter at the index.js level?
Thank you!

Try importing your BrowserRouter like this:
import { BrowserRouter as Router } from 'react-router-dom'
Then replace everywhere it appears BrowserRouter with Router instead.

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.