Uncaught Error: The `style` prop expects a mapping from style properties

Question

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.

Answer 1

<button onClick={this.onSignIn} style="">Sign In</button>

remove the style attribute or replace it by an object.

https://reactjs.org/docs/dom-elements.html#style