We Keep Coding

React: ProgressiveMobileStepper handleNext function does not work (Material UI)

Dear community I am currently writing a website and its user onboarding using the ProrgressiveMobileStepper using Material UI. You can find my website here:
https://konekto-eeioq6hwh.now.sh/first_use
Apart from the formatting being screwed up (for which I would also appreciate your help), I am mainly concerned that the next button does not work. I have structured that the several screens are conditionally rendered in index.js depending on the state and the handleNext function should be called from ProgressiveMobileStepper when the button is clicked. However, the screen does not update then.
index.js file:
import React from 'react';
import { Grid, Container } from '#material-ui/core';
import { Header } from '../Layout';
import logo from './android-icon-192x192.png';
import { withStyles } from '#material-ui/core/styles';
import ExplanationAboutProcess0 from './Explanation0';
import ExplanationAboutProcess1 from './ExplanationProcess1';
import ExplanationAboutProcess2 from './ExplanationProcess2';
import ExplanationAboutProcess3 from './ExplanationProcess3';
import ProgressiveMobileStepper from './ProgressiveMobileStepper';
const styles = theme => ({
container: {
alignItems: 'center',
border: 'black',
'border-width': 'medium',
'margin-top': '80px',
background: 'rgba(255, 255, 255, 0.8)',
'border-radius': '20px'
},
picture: { display: 'block', margin: '0 auto' },
box: { width: '230px' }
});
class FirstUse extends React.Component {
constructor(props) {
super(props);
this.classes = props.classes;
this.state = {
componentType: 'explanationaboutprocess0'
};
this.handleNext = this.handleNext.bind(this);
this.handleBack = this.handleBack.bind(this);
}
fun() {
//this.props.history.push('/settings');
}
handleNext(e) {
console.log(e);
console.log(this.componentType);
if (this.componentType == 'explanationaboutprocess0')
this.setState({ componentType: 'explanationaboutprocess1' });
}
handleBack(e) {
console.log(e);
if (this.componentType == 'explanationaboutprocess1')
this.setState({ componentType: 'explanationaboutprocess0' });
}
render() {
let component;
if (this.state.componentType == 'explanationaboutprocess0') {
component = (
<ExplanationAboutProcess0
handleNext={this.handleNext}
handleBack={this.handleBack}
/>
);
} else if (this.state.componentType == 'explanationaboutprocess1') {
component = (
<ExplanationAboutProcess1
handleComponentType={this.handleComponentType}
handleBack={this.handleBack}
/>
);
} else if (this.state.componentType == 'explanationaboutprocess2') {
component = (
<ExplanationAboutProcess2
handleComponentType={this.handleComponentType}
handleBack={this.handleBack}
/>
);
} else if (this.state.componentType == 'explanationaboutprocess3') {
component = (
<ExplanationAboutProcess3
handleComponentType={this.handleComponentType}
handleBack={this.handleBack}
/>
);
}
return (
<React.Fragment>
<Header title="Learn how to send SOS" />
<Grid
container
className={this.classes.container}
direction="column"
spacing={2}
>
<Grid item sm={12} className={this.classes.item}>
<img src={logo} alt="Logo" />
</Grid>
<Grid item sm={12} className={this.classes.item} />
<Container component="main" maxWidth="sm">
{component}
</Container>
</Grid>
<Grid item sm={12} className={this.classes.item}>
<ProgressiveMobileStepper />
</Grid>
</React.Fragment>
);
}
}
export default withStyles(styles)(FirstUse);
ProgressiveMobileStepper.js file:
import React from 'react';
import { makeStyles, useTheme } from '#material-ui/core/styles';
import MobileStepper from '#material-ui/core/MobileStepper';
import Button from '#material-ui/core/Button';
import KeyboardArrowLeft from '#material-ui/icons/KeyboardArrowLeft';
import KeyboardArrowRight from '#material-ui/icons/KeyboardArrowRight';
const useStyles = makeStyles({
root: {
maxWidth: 400,
flexGrow: 1
}
});
export default function ProgressMobileStepper(props) {
const classes = useStyles();
const theme = useTheme();
const [activeStep, setActiveStep] = React.useState(0);
return (
<MobileStepper
variant="progress"
steps={6}
position="static"
className={classes.root}
nextButton={
<Button
size="small"
onClick={props.handleNext}
disabled={activeStep === 5}
>
Next
{theme.direction === 'rtl' ? (
<KeyboardArrowLeft />
) : (
<KeyboardArrowRight />
)}
</Button>
}
backButton={
<Button
size="small"
onClick={props.handleBack}
disabled={activeStep === 0}
>
{theme.direction === 'rtl' ? (
<KeyboardArrowRight />
) : (
<KeyboardArrowLeft />
)}
Back }
</Button>
}
/>
);
}
Just as an example, you can see two of the screens, which should be conditionally rendered below:
Explanation0.js file:
import React from 'react';
import { Typography } from '#material-ui/core';
export default class ExplanationAboutProcess1 extends React.Component {
constructor(props) {
super(props);
this.classes = props.classes;
this.state = {};
}
render() {
return (
<React.Fragment>
<Typography>
Konnekto allows you to send an emergency request from you phone
without requiring a celluar connection. Please enter your personal
information.
</Typography>
</React.Fragment>
);
}
}
ExplanationProcess1.js file:
import React from 'react';
export default class ExplanationAboutProcess1 extends React.Component {
constructor(props) {
super(props);
this.classes = props.classes;
this.state = {};
}
render() {
return (
<React.Fragment>
<p>
To explain you how you would use the app in case of emergency, we
guide you through which questions we ask you:
<br />
0.1 Are you affected yourself?
<br />
0.2 How do you want to contact?
</p>
</React.Fragment>
);
}
}
I would really appreciate your help!

React Navigation - How to nest a component wrapping a stack navigator inside a tab navigator

I am trying to have a tab navigator, where the settings screen/tab is a component, that, among other stuff, contains a stack navigator.
Here is the code I currently have (can also be found as a snack).
import * as React from 'react';
import { Button, Text, View, StyleSheet } from 'react-native';
import { createAppContainer, createStackNavigator, createBottomTabNavigator } from 'react-navigation';
class ScreenA extends React.Component {
static navigationOptions = {
tabBarLabel: 'A',
};
render() {
return (
<View>
<Text>Screen A</Text>
</View>
);
}
}
class SettingsHome extends React.Component {
render() {
return (
<Button onPress={() => this.props.navigation.navigate('SettingsScreenA')}>
<Text>Navigate to Settings A</Text>
</Button>
);
}
}
class SettingsScreenA extends React.Component {
render() {
return (
<View>
<Text>Settings A</Text>
<Button onPress={() => this.props.navigation.navigate('SettingsA')}>
<Text>Back to SettingsHome</Text>
</Button>
</View>
);
}
}
const SettingsStackNavigator = createStackNavigator({
SettingsHome: { screen: SettingsHome },
SettingsScreenA: { screen: SettingsScreenA }
})
class SettingsScreen extends React.Component {
static navigationOptions = {
tabBarLabel: 'Settings',
}
render() {
return (
<View>
<Text>Some other components...</Text>
<SettingsStackNavigator navigation={this.props.navigation}/>
</View>
);
}
}
const RootTabNavigator = createBottomTabNavigator({
ScreenA: { screen: ScreenA },
Settings: {screen: SettingsScreen },
});
const Navigation = createAppContainer(RootTabNavigator);
export default class App extends React.Component {
render() {
return (
<Navigation />
);
}
}
I currently get a 'Type Error: No "routes" found in navigation state' error. Did you try to pass the navigation prop of a React component '

you'll need to nest the component itself in a stackNavigator, containing the all the stackScreen, like so;
import * as React from 'react';
import { Button, Text, View, StyleSheet } from 'react-native';
import { createAppContainer, createStackNavigator, createBottomTabNavigator } from 'react-navigation';
class ScreenA extends React.Component {
static navigationOptions = {
tabBarLabel: 'A',
};
render() {
return (
<View style={{alignItems:'center', justifyContent:'center', flex:1}}>
<Text>Screen A</Text>
</View>
);
}
}
class SettingsHome extends React.Component {
render() {
return (
<Button onPress={() => this.props.navigation.navigate('SettingsScreenA')}
title ="Navigate to Settings A"
/>
);
}
}
class SettingsScreenA extends React.Component {
render() {
return (
<View style={{alignItems:'center', justifyContent:'center', flex:1}}>
<Text>Settings A</Text>
<Button onPress={() => this.props.navigation.navigate('SettingsHome')}
title ="Back to SettingsHome"
/>
</View>
);
}
}
class SettingsScreen extends React.Component {
render() {
return (
<View style={{alignItems:'center', justifyContent:'center', flex:1}}>
<Text>Some other components...</Text>
<Button title="Seting A" onPress={() => this.props.navigation.navigate('SettingsScreenA')} />
</View>
);
}
}
// Create our stack navigator
const SettingsStackNavigator = createStackNavigator({
SettingsMain: {screen: SettingsScreen,},
SettingsHome: { screen: SettingsHome },
SettingsScreenA: { screen: SettingsScreenA }
}, {initialRouteName: 'SettingsMain'})
const RootTabNavigator = createBottomTabNavigator({
ScreenA: { screen: ScreenA },
Settings: {screen: SettingsStackNavigator },
});
// And the app container
export default createAppContainer(RootTabNavigator);
hope it helps!

Calling a method from a different component (File) in React JS

I have an App Bar component, I'm using Material UI v1.0.0-beta.33
import React from "react";
import PropTypes from "prop-types";
import { withStyles } from "material-ui/styles";
import AppBar from "material-ui/AppBar";
import Toolbar from "material-ui/Toolbar";
import Typography from "material-ui/Typography";
import Button from "material-ui/Button";
import IconButton from "material-ui/IconButton";
import MenuIcon from "material-ui-icons/Menu";
import TemporaryDrawer from "./Drawer";
const styles = {
root: {
width: "100%"
},
flex: {
flex: 1
},
menuButton: {
marginLeft: -12,
marginRight: 20
},
};
function ButtonAppBar(props) {
const { classes } = props;
return (
<div className={classes.root}>
<TemporaryDrawer/>
<AppBar position="static">
<Toolbar>
<IconButton className={classes.menuButton} color="inherit" aria-label="Menu">
<MenuIcon />
</IconButton>
<Typography variant="title" color="inherit" className={classes.flex}>
Title
</Typography>
<Button onClick={} color="inherit">User Name</Button>
</Toolbar>
</AppBar>
</div>
);
}
ButtonAppBar.propTypes = {
classes: PropTypes.object.isRequired
};
export default withStyles(styles)(ButtonAppBar);
As you can see I'm importing another component called TemporaryDrawer, in the code of that component there's a method called "toggleDrawer" that triggers the Drawer.
My questions is how can I use the toggleDrawer method from TemporaryDrawer in the above code, I have a button with the onClick method empty.
For reference, I put the code from TemporaryDrawer below:
import React from "react";
import PropTypes from "prop-types";
import { withStyles } from "material-ui/styles";
import Drawer from "material-ui/Drawer";
import List from "material-ui/List";
import Divider from "material-ui/Divider";
const styles = {
list: {
width: 250
},
listFull: {
width: "auto"
}
};
class TemporaryDrawer extends React.Component {
state = {
left: false
};
toggleDrawer = (side, open) => () => {
this.setState({
[side]: open
});
};
render() {
const { classes } = this.props;
const sideList = (
<div className={classes.list}>
<List>AA</List>
<List>BB</List>
<List>CC</List>
<Divider />
<List>AA1</List>
<List>BB1</List>
<List>CB1</List>
</div>
);
return (
<div>
<Drawer open={this.state.left} onClose={this.toggleDrawer("left", false)}>
<div
tabIndex={0}
role="button"
onClick={this.toggleDrawer("left", false)}
onKeyDown={this.toggleDrawer("left", false)}
>
{sideList}
</div>
</Drawer>
</div>
);
}
}
TemporaryDrawer.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(TemporaryDrawer);
Thanks in advance.

Looking at the toggleDrawer method in TemporaryDrawer component
the method can simply be "litfed" into the parent component ButtonAppBar
updated ButtonAppBar turned in the class component:
class ButtonAppBar extends Component {
constructor(props) {
super(props);
this.state {
isDrawerOpen: false
}
this.closeDrawer = this.closeDrawer.bind(this);
}
closeDrawer() {
this.setState({ isDrawerOpen: false });
}
render() {
const { classes } = props;
return (
<div className={classes.root}>
<TemporaryDrawer open={this.state.isDrawerOpen} onDrawerClose={this.closeDrawer} />
<AppBar position="static">
<Toolbar>
<IconButton className={classes.menuButton} color="inherit" aria-label="Menu">
<MenuIcon />
</IconButton>
<Typography variant="title" color="inherit" className={classes.flex}></Typography>
<Button onClick={} color="inherit">User Name</Button>
</Toolbar>
</AppBar>
</div>
);
}
}
And then TemporaryDrawer component can be:
class TemporaryDrawer extends Component {
constructor(props) {
super(props);
}
render() {
return (
<Drawer open={this.props.isDrawerOpen} onClose={this.props.onDrawerClose}>
...
</Drawer>
)
}
}

Why won't my objects display its menu item?

I'm trying to figure out why Match and History aren't showing up whenever I slide my <Drawer/>. I've looked around a lot throughout the web and SO but can't find anything pertaining to this.
Here's SideMenu.js file:
import React, {Component} from 'react';
import { Text, View} from 'react-native';
import {List, ListItem, Header} from 'react-native-elements';
import Container from "native-base/src/theme/components/Container";
export default class SideMenu extends Component {
constructor(props) {
super(props);
}
render() {
let list = [{
title: "Match",
onPress: () => {
this.props.navigator.replace("Match")
}
}, { // 2nd menu item below
title: "History",
onPress: () => {
this.props.navigator.replace("History")
}
}];
return(
<Container theme={this.props.theme}>
<Header/>
<View>
<List dataArray={list} renderRow={(item) =>
<ListItem button onPress={item.onPress.bind(this)}>
<Text>{item.title}</Text>
</ListItem>
}/>
</View>
</Container>
);
}
}
Here's AppContainer.js file:
import React, {Component} from 'react';
import {Navigator} from 'react-native-deprecated-custom-components';
import Drawer from "react-native-drawer-menu";
import SideMenu from './components/sideMenu';
export default class AppContainer extends Component {
constructor(props) {
super(props);
this.state = {
toggled: false,
store: {}, // holds data stores
theme: null
}
}
toggleDrawer() {
this.state.toggled ? this._drawer.close() : this._drawer.open();
}
openDrawer() {
this.setState({toggled: true});
}
closeDrawer() {
this.setState({toggled: false});
}
renderScene(route, navigator) { // current route you want to change to, instance of the navigator
switch(route) {
default: {
return null;
}
}
}
// handles how our scenes are brought into view
configureScene(route, routeStack) {
return Navigator.SceneConfigs.PushFromLeft; // pushes new scene from RHS
}
render() {
return(
<Drawer
ref = {(ref) => this._drawer = ref}
type = 'default' // controls how menu appears on screen, pushes content to the side
content = {<SideMenu navigator={this._navigator} theme={this.state.theme}
/>}
onClose={this.closeDrawer.bind(this)}
onOpen={this.openDrawer.bind(this)}
openDrawerOffset={0.9}
>
<Navigator
ref={(ref) => this._navigator = ref}
configureScene={this.configureScene.bind(this)}
renderScene={this.renderScene.bind(this)}
/>
</Drawer>
);
}
}

First of all there's no such property as dataArray in ListView component. You need to create data source first and pass it to dataSource property. Look at the example in the DOCUMENTATION

Looking at the Lists API for react-native-elements https://react-native-training.github.io/react-native-elements/API/lists/
Examples using ListItem are using title prop for setting the title. Maybe try returning this instead from SideMenu render
return(
<Container theme={this.props.theme}>
<Header/>
<View>
<List>
{
list.map((item, i) => (
<ListItem onPress={item.onPress} key={i} title={item.title}/>
))
}
</List>
</View>
</Container>
);

TypeError: enterPage is undefined in OnsenUI 2 React navigator

I'm try to create a simple SideMenu component with OnsenUI Splitter like below:
import React, { PropTypes, Component } from 'react';
import { Page, Icon, List, ListItem, Splitter, SplitterSide, SplitterContent, Toolbar, ToolbarButton, Modal} from 'react-onsenui';
import page1 from '../pages/page1.jsx';
import page2 from '../pages/page2.jsx';
class SideMenu extends Component {
constructor(props) {
super(props);
this.renderToolbar = this.renderToolbar.bind(this);
this.hide = this.hide.bind(this);
this.show = this.show.bind(this);
this.goto_page1 = this.goto_page1.bind(this);
this.goto_page2 = this.goto_page2.bind(this);
this.state = {
isOpen: false
};
};
renderToolbar() {
return (
<Toolbar>
<div className='left'>
<ToolbarButton onClick={this.show}>
<Icon icon='ion-navicon, material:md-menu' />
</ToolbarButton>
</div>
<div className='center'>{this.props.pageTitle}</div>
</Toolbar>
);
};
hide() {
this.setState({isOpen: false});
};
show() {
this.setState({isOpen: true});
};
goto_page1() {
this.props.navigator.resetPage({
component: page1,
key: 'Page1_Index'
});
};
goto_page2() {
this.props.navigator.resetPage({
component: page2,
key: 'Page2_Index'
});
};
render() {
return (
<Splitter>
<SplitterSide
style={{
boxShadow: '0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23)'
}}
side='left'
width={200}
collapse={true}
isSwipeable={true}
isOpen={this.state.isOpen}
onClose={this.hide}
onOpen={this.show}
>
<Page>
<List
dataSource={[ 'page one', 'page two']}
renderRow={(title) => {
switch(title) {
case "page one":
return (
<ListItem key={title} onClick={this.goto_page1} tappable>
<div className='left'>{title}</div>
</ListItem>
);
break;
case "page two":
return (
<ListItem key={title} onClick={this.goto_page2} tappable>
<div className='left'>{title}</div>
</ListItem>
);
break;
default:
return (
<ListItem key={title} onClick={this.hide} tappable>
<div className='left'>{title}</div>
</ListItem>
);
break;
}
}}
/>
</Page>
</SplitterSide>
<SplitterContent>
<Page renderToolbar={this.renderToolbar} >
{this.props.children}
</Page>
</SplitterContent>
</Splitter>
);
}
}
SideMenu.propTypes = {
navigator: PropTypes.object.isRequired,
pageTitle: PropTypes.string.isRequired
};
export default SideMenu;
And use it as below:
import React, { PropTypes, Component } from 'react';
import { Icon, List, ListItem, ListHeader} from 'react-onsenui';
import SideMenu from '../components/SideMenu.jsx';
class page1 extends Component {
render() {
return (
<SideMenu navigator={this.props.navigator} pageTitle="page 1 title">
Page content here
</SideMenu>
);
}
}
page1.propTypes = {
navigator: PropTypes.object
};
export default page1;
But unfortunately it's return below error when change page from SideMenu:
TypeError: enterPage is undefined
I also create an online CodePen for it, you can see it here:
https://codepen.io/anon/pen/ObRzLB?editors=0011
I double checked anything where is the issue guys?

Ons.Navigator only admits Ons.Page as children. Try to wrap your SideMenu component with <Ons.Page> ... </Ons.Page> when you render it in page1.