React: Button doesn't work / Can't perform state update - reactjs

Question

I have written the following website:https://konekto-hgol6b5mz.now.sh
If you quickly click through the onboarding and settings you can see that I have one screen with on "Direct SOS" button. However, its function is not executed and thus I do not get redirected. Here you can see the class concerning that:
import React from 'react';
import { Button, Grid } from '#material-ui/core';
import { withStyles } from '#material-ui/core/styles';
import AppContext from '../utils/AppContext';
const styles = theme => ({
container: {
alignItems: 'center',
// background: 'white',
border: 'black',
'border-width': 'medium',
'margin-top': '80px',
background: 'rgba(255, 255, 255, 0.8)',
'border-radius': '20px'
},
item: {
// background: 'red',
width: '100%',
//background: 'white',
'text-align': 'center',
'border-radius': '5px',
'margin-top': '10px'
},
sosbutton: {
background: 'red',
'text-align': 'center',
'margin-top': '30px',
height: '80%',
width: '100%'
}
});
class Landingpage extends React.Component {
static contextType = AppContext;
constructor(props) {
super(props);
this.classes = props.classes;
this.state = {};
this.handleDirectSOS = this.handleDirectSOS.bind(this);
}
componentDidMount() {
console.log(this.context);
if (this.context.onBoardingStatus === false) {
console.log('IN IF');
this.props.history.push('/onboarding');
}
}
handleDirectSOS() {
console.log('direct SOS');
this.props.history.push('/emergency_sent');
}
render() {
console.log('direct SOS');
return (
<Header title="Send out SOS" />
<Grid
container
className={this.classes.container}
direction="column"
spacing={2}
>
<Grid
item
sm={12}
className={(this.classes.item, this.classes.forwardbutton)}
>
<Button
className={this.classes.sosbutton}
name="type_person"
value="1"
onClick={this.props.handleDirectSOS}
>
Direct SOS
</Button>
</Grid>
</Grid>
);
}
}
export default withStyles(styles)(Landingpage);
index.js:1375 Warning: Can't perform a React state update on an
unmounted component. This is a no-op, but it indicates a memory leak
in your application. To fix, cancel all subscriptions and asynchronous
tasks in the componentWillUnmount method.
in Settings (created by WithStyles(Settings))
in WithStyles(Settings) (created by Context.Consumer)
This might be associated with the Settings file but I have no idea what might be the reason. Here you can see the settings file:
import React from 'react';
import axios from 'axios';
import {
Grid,
Box,
Container,
Typography,
Button,
TextField
} from '#material-ui/core';
import { withStyles } from '#material-ui/core/styles';
import Header from '../Layout/Header';
import CONST from '../utils/Constants';
const CssTextField = withStyles({
root: {
'& label.Mui-focused': {
color: 'green'
},
'& .MuiInput-underline:after': {
borderBottomColor: 'green'
},
'& .MuiOutlinedInput-root': {
'& fieldset': {
borderColor: 'red'
},
'&:hover fieldset': {
borderColor: 'yellow'
},
'&.Mui-focused fieldset': {
borderColor: 'green'
}
}
},
layout: {
width: '100%'
}
})(TextField);
const styles = theme => ({
root: {
display: 'flex',
flexWrap: 'wrap',
width: '100%'
},
title: {
'text-align': 'center'
},
textfield: {
'margin-top': theme.spacing(1),
'margin-bottom': theme.spacing(2)
}
});
//const classes = useStyles();
class Settings extends React.Component {
constructor(props) {
super(props);
//const { classes } = props;
this.classes = props.classes;
this.state = {};
this.onChangeText = this.onChangeText.bind(this);
this.onSubmit = this.onSubmit.bind(this);
}
onChangeText(e) {
console.log('text has changed.');
const key = e.target.id;
const value = e.target.value;
let state_obj = {};
state_obj[key] = value;
this.setState(state_obj);
}
onSubmit(e) {
console.log('Submit button pressed.');
axios
.post(CONST.URL + 'user/update', {
id: 1,
data: this.state
})
.then(res => {
console.log(res);
console.log(res.data);
})
.catch(err => {
console.log(err);
});
this.props.history.push('/');
}
componentDidMount() {
console.log('Component did mount.');
axios
.get(CONST.URL + 'user', {
params: { id: 1 }
})
.then(resp => {
// console.log(resp);
const data = resp.data.data;
this.setState(data);
console.log(this.state.fullname);
})
.catch(function(error) {
console.log(error);
})
.then(function() {
// always executed
});
}
render() {
return (
<React.Fragment>
<Header title="Settings" BackButton="true" />
<Container component="main" maxWidth="sm">
{/* <Typography variant="h4" align="center" gutterBottom="true">
Settings
</Typography> */}
<Box className={this.classes.textfield}>
<Grid
container
direction="column"
justify="flex-end"
alignItems="left"
item
xs
>
<Typography variant="h6">Personal Information</Typography>
<CssTextField
id="fullname"
label="Fullname"
onChange={this.onChangeText}
value={this.state.fullname}
/>
<CssTextField
id="birthday"
label="Birthday"
onChange={this.onChangeText}
value={this.state.birthday}
/>
<CssTextField
id="address"
label="Home address"
onChange={this.onChangeText}
value={this.state.address}
/>
</Grid>
</Box>
<Box className={this.classes.textfield}>
<Grid
container
direction="column"
justify="flex-end"
alignItems="left"
item
xs
>
<Typography variant="h6">Health information</Typography>
<CssTextField
id="allergies"
label="Allergies"
onChange={this.onChangeText}
value={this.state.allergies}
/>
<CssTextField
id="past_injuries"
label="Past injuries"
onChange={this.onChangeText}
value={this.state.past_injuries}
/>
</Grid>
</Box>
<Box className={this.classes.textfield}>
<Grid
container
direction="column"
justify="flex-end"
alignItems="left"
item
xs
>
<Typography variant="h6">Contact information</Typography>
<CssTextField
id="fullname_relative_1"
label="Fullname relative 1"
onChange={this.onChangeText}
value={this.state.fullname_relative_1}
/>
<CssTextField
id="phone_number_relative_1"
label="Phone number relative 1"
onChange={this.onChangeText}
value={this.state.phone_number_relative_1}
/>
<CssTextField
id="fullname_relative_2"
label="Fullname relative 2"
onChange={this.onChangeText}
value={this.state.fullname_relative_2}
/>
<CssTextField
id="phone_number_relative_2"
label="Phone number relative 2"
onChange={this.onChangeText}
value={this.state.phone_number_relative_2}
/>
</Grid>
</Box>
<Box>
<Grid
container
direction="column"
justify="flex-end"
alignItems="left"
item
xs
>
<Button
variant="contained"
className={this.classes.button}
onClick={this.onSubmit}
>
Save
</Button>
<br />
{/* <Button
variant="contained"
className={this.classes.button}
onClick={() => {
this.props.history.push('/');
}}
>
Cancel emergency
</Button> */}
{/* <br /> */}
<Button
variant="contained"
className={this.classes.button}
onClick={() => {
this.props.history.push('/onboarding_reset');
}}
>
Reset App
</Button>
{/* <br />
<Button
variant="contained"
className={this.classes.button}
onClick={() => {
this.props.history.push('/Signin');
}}
>
Signin
</Button> */}
</Grid>
</Box>
</Container>
</React.Fragment>
);
}
}
export default withStyles(styles)(Settings);
I would really appreciate your help!

Answer 1

I think you have two separate issues.
The button press issue is because you're calling onClick={this.props.handleDirectSOS} instead of onClick={this.handleDirectSOS}
The error you're seeing is because of the line this.setState(data);, you need to wrap that or cancel the call if the component is unmounted. There's quite a few articles on it like Is there a way to check if the react component is unmounted?