title: Uncaught Error: The `style` prop expects a mapping from style properties
body: <p>According to error I pasted Home components please have a look</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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 &amp;&amp; obj.token) {
        const { token } = obj;
        // Verify token
        fetch('/api/account/verify?token=' + token)
          .then(res =&gt; res.json())
          .then(json =&gt; {
            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 =&gt; res.json())
        .then(json =&gt; {
          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 =&gt; res.json())
        .then(json =&gt; {
          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 &amp;&amp; obj.token) {
        const { token } = obj;
        // Verify token
        fetch('/api/account/logout?token=' + token)
          .then(res =&gt; res.json())
          .then(json =&gt; {
            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 (&lt;div&gt;&lt;p&gt;Loading...&lt;/p&gt;&lt;/div&gt;);
      }
      
      if (!token) {
        return (
          &lt;div&gt;
           &lt;div&gt;
             {
               (signInError) ? (
                 &lt;p&gt;{ signInError }&lt;/p&gt;
               ) : (null)
             }
             &lt;p&gt;Sign In&lt;/p&gt;
             &lt;input type="text" placeholder="Email" value={signInEmail} onChange={this.onTextboxChangeSignInEmail}/&gt;
             &lt;input type="text" placeholder="Password" value={signInPassword} onChange={this.onTextboxChangeSignInPassword}/&gt;
             &lt;button onClick={this.onSignIn} style=""&gt;Sign In&lt;/button&gt;
           &lt;/div&gt;
            &lt;br/&gt;&lt;br/&gt;
            &lt;div&gt;
              {
                (signUpError) ? (
                  &lt;p&gt;{ signUpError }&lt;/p&gt;
                ) : (null)
              }
              &lt;p&gt;Sign Up&lt;/p&gt;
              &lt;input type="text" placeholder="First name" value={signUpFirstName} onChange={this.onTextboxChangeSignUpFirstName}/&gt;
              &lt;input type="text" placeholder="Last name" value={signUpLastName} onChange={this.onTextboxChangeSignUpLastName}/&gt;
              &lt;input type="text" placeholder="Email name" value={signUpEmail} onChange={this.onTextboxChangeSignUpEmail}/&gt;
              &lt;input type="text" placeholder="Password" value={signUpPassword} onChange={this.onTextboxChangeSignUpPassword}/&gt;
              &lt;button onClick={this.onSignUp}&gt;Sign Up&lt;/button&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        );
      }
  
      return(
        &lt;div&gt;
          &lt;TodoList/&gt;
          &lt;button onClick={this.logout}&gt;Logout&lt;/button&gt;
        &lt;/div&gt;
      );
  
    }
  }
  
  export default Home;</code></pre>
  </div>
  </div>
  </p>
  
  <p>`<a href="https://i.stack.imgur.com/bErJI.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bErJI.png" alt="enter image description here"></a></p>
  
  <p>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 <a href="https://stackoverflow.com/questions/43366026/react-inline-style-style-prop-expects-a-mapping-from-style-properties-to-value">React inline style - style prop expects a mapping from style properties to values, not a string</a> I removed all styles. but my error didn't gone. </p>