Develop Reference

React js not navigating to pages using react router

If I type anything in my http://localhost:3000/anything it will do the same as if I type home or / or login, nothing. The page will be blank.
My social.js:
import React, { Component } from 'react';
import { Route, Switch } from 'react-router-dom';
import Home from '../../containers/Pages/Home/Home';
import Login from '../../containers/Pages/Login/Login';
class Social extends Component {
render () {
return (
<div>
<Switch>
<Route path="/home" exact component={Home} />
<Route path="/login" exact component={Login} />
</Switch>
</div>
);
}
}
export default Social;
app.js:
import React, { Component } from 'react';
import { BrowserRouter } from 'react-router-dom';
import Layout from './Layout/Layout'
import Social from './containers/Pages/Social';
class App extends Component {
render() {
return (
<BrowserRouter>
<div className="App">
<Layout>
<Social />
</Layout>
</div>
</BrowserRouter>
);
}
}
export default App;
Any ideas what is wrong?
Thanks.
----- Edit, I notice when I remove <Layout> ... </Layout> from app.js it works.
my Layout.js:
import React, { Component } from 'react';
import Toolbar from '../components/Navigation/Toolbar/Toolbar';
class Layout extends Component {
render() {
return (
<>
<Toolbar />
</>
);
}
}
export default Layout;
and Toolbar:
import React, { Component } from 'react';
import classes from './Toolbar.module.css';
class toolbar extends Component {
render() {
return(
<>
<header className={classes.Toolbar}>
toolbar
</header>
</>
);
}
}
export default toolbar;

I think you missing the wrapping element around Toolbar component
import React, { Component } from 'react';
import Toolbar from '../components/Navigation/Toolbar/Toolbar';
class Layout extends Component {
render() {
return (
<div>
<Toolbar />
<div>
);
}
}
export default Layout;
same with the Toolbar. should be as follows:
import React, { Component } from 'react';
import classes from './Toolbar.module.css';
class Toolbar extends Component {
render() {
return(
<div>
<header className={classes.Toolbar}>
toolbar
</header>
</div>
);
}
}
export default Toolbar;

ReactJS memory leak at reloading Img source

I have written a multipage app using ReactJS. When a page/component with an is re-rendered, the browser memory increases. It seems the memory is not cleared when the component is unmounted. I expect the browser memory to decrease when the component is unmounted. Does anyone have a suggestion how to clear the memory for this image at unmount?
thanks,
Tim
import React from 'react';
export class About extends React.Component {
constructor(props) {
super(props);
}
componentDidMount() {
}
componentWillUnmount() {
}
render() {
return (
<div id='about' >
<div className="container">
<div className="row">
<div className="col-md-6">
<h2>title</h2>
<p>getting your ideas made</p>
</div>
<div className="col-md-6">
<img src="app/images/pic3.png" alt=""/>
</div>
</div>
</div>
</div>
)
}
}
update:
Below is the Parent component that the page is mounted to:
import React from 'react';
import ReactDOM from 'react-dom';
import {RightPane} from './components/RightPane.js'
import {LeftPane} from './components/LeftPane.js'
import {ModelLibrary} from './components/ModelLibrary.js'
import {ProjectsListing} from './components/ProjectsListing.js'
import {About} from './components/page_about.js'
import {Renderer} from './components/Renderer.js'
function MainSwitch(view){
switch (view) {
case 'listing':
return <ProjectsListing />
break;
case 'viewer':
return (
<div>
<Renderer />
<LeftPane />
<RightPane />
</div>
)
break;
case 'about':
return <About />
break;
default:
return (
<div>
<Renderer />
</div>
)
}
}
export class ReactRoot extends React.Component {
constructor(props) {
super(props);
this.state={
mainpage:''
}
}
showPage = (event)=>{
console.log(event.detail);
this.setState({
mainpage:event.detail
})
}
componentDidMount(){
window.addEventListener('page-change', this.showPage, false);
}
componentWillUnMount(){
window.removeEventListener('page-change', this.showPage, false);
}
render() {
return (
<div >
<div id='mainpage'>
{MainSwitch(this.state.mainpage)}
</div>
</div>
);
}
}

Why isn't the darkBaseTheme for material-ui applied?

import React from 'react';
import ReactDOM from 'react-dom';
import darkBaseTheme from 'material-ui/styles/baseThemes/darkBaseTheme';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import {Tabs, Tab} from 'material-ui/Tabs';
const styles = {
headline: {
fontSize: 24,
paddingTop: 16,
marginBottom: 12,
fontWeight: 400,
},
};
const LoginTabs = () => (
<Tabs>
<Tab label="Login" >
<div>
<h2 style = {styles.headline}>Login</h2>
<p>
This is an example tab.
</p>
<p>
You can put any sort of HTML or react component in here. It even keeps the component state!
</p>
</div>
</Tab>
<Tab label="Sign Up" >
<div>
<h2 style = {styles.headline}>Sign Up</h2>
<p>
This is another example tab.
</p>
</div>
</Tab>
</Tabs>
);
class LoginApp extends React.Component {
constructor () {
super();
this.muiTheme = darkBaseTheme;
}
componentWillMount () {
console.log(this.muiTheme);
}
render() {
return(
<div>
{LoginTabs()}
</div>
)
}
}
const Main = () => (
<MuiThemeProvider muiTheme={getMuiTheme(darkBaseTheme)}>
<LoginApp />
</MuiThemeProvider>
);
// ========================================
ReactDOM.render(
<Main />,
document.getElementById('root')
);
The tabs are rendered with the default light theme even though I've specified that darktheme using muiThemeProvider.
Most of this code is copied from the material-ui website and I'm not sure what is wrong. Can anybody suggest a fix?
I think the palette is being overwritten at some point, but I'm not sure where.

You can place the MuiThemeProvider at the root - it is not required on all components.
You can make the theme dark by setting type to dark. While it's only a single property value change, internally it modifies the value of the following keys:
palette.text
palette.divider
palette.background
palette.action
The theme can be set up this way.
import CssBaseline from '#material-ui/core/CssBaseline';
import { MuiThemeProvider, createMuiTheme } from '#material-ui/core/styles';
import { Provider } from 'react-redux';
const theme = createMuiTheme({
palette: {
type: 'dark',
},
});
export default function component(props) {
return (
<MuiThemeProvider theme={theme}>
<div>
<CssBaseline />
<Header />
<AppBody />
</div>
</MuiThemeProvider>
);
}
https://material-ui.com/customization/themes/#type-light-dark-theme-

Cannot read property 'rejected' of undefined | ReactJS

My Login.js file was getting larger and larger so I decided to create a reusable component in a separate file, LoginForm.js. However, after I extracted the previous code from Login.js into LoginForm.js one of my props is getting undefined and I have no idea why.
The prop who's is getting undefined: this.props.token
I've imported all the modules and compared the code, and everything seems to be correct.
File 1
In Login.js I have this:
import React, { Component } from 'react'
import { connect } from 'react-redux'
import { createToken } from '../../actions/tokenActions'
import LoginForm from './LoginForm'
// Styles
import Typography from 'material-ui/Typography'
import Card, { CardActions, CardContent } from 'material-ui/Card'
import Button from 'material-ui/Button'
import { CircularProgress } from 'material-ui/Progress'
import injectSheet from 'react-jss'
class Login extends Component {
constructor(props) {
super(props)
this.state = {}
}
onFormSubmit(e) {
e.preventDefault()
this.props.createToken(this.state)
}
render() {
const progressBar = this.props.token.pending
? <CircularProgress className={this.props.progress} />
: ''
return (
<div className="box" style={{ margin: '100px auto', width: '300px' }}>
{progressBar}
<form
onSubmit={this.onFormSubmit.bind(this)}
style={{ display: this.props.token.pendling ? 'none' : 'block' }}
>
<LoginForm />
</form>
</div>
)
}
}
const mapState = state => {
return {
token: state.token
}
}
const mapDispatch = (dispatch, props) => ({
createToken: data => dispatch(createToken(data))
})
export default connect(mapState, mapDispatch)(Login)
File 2
And in my other file, LoginForm.js I have this:
import React, { Component } from 'react'
import { connect } from 'react-redux'
import { createToken } from '../../actions/tokenActions'
//Styles
import Card, { CardActions, CardContent } from 'material-ui/Card'
import Button from 'material-ui/Button'
import Typography from 'material-ui/Typography'
export default class LoginForm extends Component {
constructor(props) {
super(props)
this.state = {}
}
onFormSubmit(e) {
e.preventDefault()
this.props.createToken(this.state)
}
render() {
console.log(this.props.token)
return (
<Card>
<CardContent>
<Typography
style={{
fontSize: '40px',
fontWeight: '300',
color: '#636363',
marginBottom: '20px'
}}
type="subheading"
gutterBottom
align="center"
>
Logga In
</Typography>
<input
type="text"
placeholder="Email"
onChange={e => this.setState({ email: e.target.value })}
/>
<input
type="password"
placeholder="Lösenord"
onChange={e => this.setState({ password: e.target.value })}
/>
<Button
raised
color="primary"
onClick={this.onFormSubmit.bind(this)}
className="text-center"
>
Skicka
</Button>
{this.props.token.rejected
? 'Felaktigt användarnamn eller lösenord'
: ''}
</CardContent>
</Card>
)
}
}
I bet it's a really basic question, but I have no other to ask than here. I am really grateful for all the help!

<LoginForm /> doesnt provide any props.
this.props wouldn't be undefined if you provided it like this: <LoginForm token={this.props.token} /> props doesnt get passed on if you dont explicit write it, you can write them one by one but you can also type like this: <LoginForm {...this.props} />

React - render component when clicking on a component which is not its child

I'm trying to figure out how to make components communicate with each other in React. I have a large component App. In it I have 2 components: ParentComponentOne and ParentComponentTwo. In ParentComponentOne I have a component called ChildParentOne. How can i render the ParentComponentTwo only when clicking on ChildParent One
App.jsx
import React, { Component } from 'react';
import ParentComponentOne from 'ParentComponentOne';
import ParentComponentTwo from 'ParentComponentTwo';
import './App.css';
class App extends Component {
state = {
show:{
componentTwo: false
}
};
render() {
return (
<div>
<ParentComponentOne />
{this.state.show.componentTwo? <ParentComponentTwo /> : null}
</div>
);
}
}
export default App;
ParentComponentOne.jsx
import React, { Component } from 'react';
import ChildParentOne from 'ChildParentOne';
class ParentComponentOne extends Component {
render() {
return (
<div>
<ChildParentOne />
<div>some content</div>
<ChildParentOne />
</div>
);
}
}
export default ParentComponentOne ;
ChildParentOne.jsx
import React, { Component } from 'react';
class ChildParentOne extends Component {
render() {
return (
<div onClick={}>
BTN
</div>
);
}
}
export default ChildParentOne ;

Pass a callback into ParentComponentOne which would change show.componentTwo state when child of it is clicked:
class App extends Component {
state = {
show: {
componentTwo: false
}
};
childClicked() {
this.setState({
show: {
componentTwo: true
}
})
}
render() {
return (
<div>
<ParentComponentOne childClicked={this.childClicked} />
{this.state.show.componentTwo? <ParentComponentTwo /> : null}
</div>
);
}
}
ParentComponentOne:
class ParentComponentOne extends Component {
render() {
return (
<div>
<ChildParentOne onBtnClick={this.props.childClicked} />
<div>some content</div>
<ChildParentOne onBtnClick={this.props.childClicked} />
</div>
);
}
}
Now, just pass this callback into ChildParentOne similarly and use it as a prop:
class ChildParentOne extends Component {
render() {
return (
<div onClick={this.props.onBtnClick}>
BTN
</div>
);
}
}