According to error I pasted Home components please have a look
import React, { Component } from 'react';
import { getFromStorage
,setInStorage } from "../../utils/storage";
import 'whatwg-fetch';
// import TodoList from "./TodoList"
class Home extends Component {
constructor(props) {
super(props);
this.state = {
token:'',
isLoading: true,
signUpError: '',
signInError: '',
signInEmail: '',
signInPassword: '',
signUpFirstName: '',
signUpLastName: '',
signUpEmail: '',
signUpPassword: ''
};
this.onTextboxChangeSignInEmail = this.onTextboxChangeSignInEmail.bind(this);
this.onTextboxChangeSignInPassword = this.onTextboxChangeSignInPassword.bind(this);
this.onTextboxChangeSignUpEmail = this.onTextboxChangeSignUpEmail.bind(this);
this.onTextboxChangeSignUpPassword = this.onTextboxChangeSignUpPassword.bind(this);
this.onTextboxChangeSignUpFirstName = this.onTextboxChangeSignUpFirstName.bind(this);
this.onTextboxChangeSignUpLastName = this.onTextboxChangeSignUpLastName.bind(this);
this.onSignIn = this.onSignIn.bind(this);
this.onSignUp = this.onSignUp.bind(this);
this.logout = this.logout.bind(this);
}
componentDidMount() {
const obj = getFromStorage('the_main_app');
if (obj && obj.token) {
const { token } = obj;
// Verify token
fetch('/api/account/verify?token=' + token)
.then(res => res.json())
.then(json => {
if (json.success) {
this.setState({
token,
isLoading: false
});
} else {
this.setState({
isLoading: false,
});
}
});
} else {
this.setState({
isLoading: false,
});
}
}
onTextboxChangeSignInEmail(event) {
this.setState({
signInEmail: event.target.value,
})
}
onTextboxChangeSignInPassword(event) {
this.setState({
signInPassword: event.target.value,
})
}
onTextboxChangeSignUpEmail(event) {
this.setState({
signUpEmail: event.target.value,
})
}
onTextboxChangeSignUpPassword(event) {
this.setState({
signUpPassword: event.target.value,
})
}
onTextboxChangeSignUpFirstName(event) {
this.setState({
signUpFirstName: event.target.value,
})
}
onTextboxChangeSignUpLastName(event) {
this.setState({
signUpLastName: event.target.value,
});
}
onSignIn() {
// Grab state
const {
signInEmail,
signInPassword,
} = this.state;
this.setState({
isLoading: true,
});
// Post request to backend
fetch('/api/account/signin', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
email: signInEmail,
password: signInPassword,
}),
}).then(res => res.json())
.then(json => {
console.log('json', json);
if (json.success) {
setInStorage('the_main_app', { token: json.token });
this.setState({
signInError: json.message,
isLoading: false,
signInPassword: '',
signInEmail: '',
token: json.token,
});
} else {
this.setState({
signInError: json.message,
isLoading: false,
});
}
});
}
onSignUp() {
// Grab state
const {
signUpFirstName,
signUpLastName,
signUpEmail,
signUpPassword,
} = this.state;
this.setState({
isLoading: true,
});
// Post request to backend
fetch('/api/account/signup', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
firstName: signUpLastName,
lastName: signUpLastName,
email: signUpEmail,
password: signUpPassword,
}),
}).then(res => res.json())
.then(json => {
console.log('json', json);
if (json.success) {
this.setState({
signUpError: json.message,
isLoading: false,
signUpEmail: '',
signUpPassword: '',
});
} else {
this.setState({
signUpError: json.message,
isLoading: false,
});
}
});
}
logout() {
this.setState({
isLoading: true,
});
const obj = getFromStorage('the_main_app');
if (obj && obj.token) {
const { token } = obj;
// Verify token
fetch('/api/account/logout?token=' + token)
.then(res => res.json())
.then(json => {
if (json.success) {
this.setState({
token: '',
isLoading: false
});
} else {
this.setState({
isLoading: false,
});
}
});
} else {
this.setState({
isLoading: false,
});
}
}
render() {
const {
isLoading,
token,
signUpError,
signInError,
signInEmail,
signInPassword,
signUpFirstName,
signUpLastName,
signUpEmail,
signUpPassword
} = this.state;
if (isLoading) {
return (<div><p>Loading...</p></div>);
}
if (!token) {
return (
<div>
<div>
{
(signInError) ? (
<p>{ signInError }</p>
) : (null)
}
<p>Sign In</p>
<input type="text" placeholder="Email" value={signInEmail} onChange={this.onTextboxChangeSignInEmail}/>
<input type="text" placeholder="Password" value={signInPassword} onChange={this.onTextboxChangeSignInPassword}/>
<button onClick={this.onSignIn} style="">Sign In</button>
</div>
<br/><br/>
<div>
{
(signUpError) ? (
<p>{ signUpError }</p>
) : (null)
}
<p>Sign Up</p>
<input type="text" placeholder="First name" value={signUpFirstName} onChange={this.onTextboxChangeSignUpFirstName}/>
<input type="text" placeholder="Last name" value={signUpLastName} onChange={this.onTextboxChangeSignUpLastName}/>
<input type="text" placeholder="Email name" value={signUpEmail} onChange={this.onTextboxChangeSignUpEmail}/>
<input type="text" placeholder="Password" value={signUpPassword} onChange={this.onTextboxChangeSignUpPassword}/>
<button onClick={this.onSignUp}>Sign Up</button>
</div>
</div>
);
}
return(
<div>
<TodoList/>
<button onClick={this.logout}>Logout</button>
</div>
);
}
}
export default Home;`
Page reload and in a console I am getting this error. I remove all inline styles which I had one or two. After reading this question React inline style - style prop expects a mapping from style properties to values, not a string I removed all styles. but my error didn't gone.
