import React, { Component } from 'react';

import { connect } from 'react-redux';

import { login } from '../../redux/reducer';

import './LoginForm.css';







class LoginForm extends Component {



  constructor(props) {

    super(props);

    this.state = {};

    this.onSubmit = this.onSubmit.bind(this);

  }



  render() {

    let {username, password} = this.state;

    let {isLoginPending, isLoginSuccess, loginError} = this.props;



    return (

          <header>

   <h1>Company Login</h1>

   </header>



      <form name=loginForm onSubmit={this.onSubmit}>









        <div className=form-group-collection>

          <div className=form-group>



            <label>Username/User ID:</label>

            <input name=username onChange={e => this.setState({username: e.target.value})} value={username}/>

          </div>





          <div className=form-group>

            <label>Password:</label>

            <input type=password name=password onChange={e => this.setState({password: e.target.value})} value={password}/>

          </div>

        </div>

        <br/>



        <input type=submit value=Login />



  </form>

       <footer>Copyright &copy; multihands.com. </footer>

    )

  }













  onSubmit(e) {

    e.preventDefault();

    let { username, password } = this.state;

    this.props.login(username, password);

    this.setState({

      username: '',

      password: ''

    });

  }

}





const mapStateToProps = (state) => {

  return {

    isLoginPending: state.isLoginPending,

    isLoginSuccess: state.isLoginSuccess,

    loginError: state.loginError

  };

}



const mapDispatchToProps = (dispatch) => {

  return {

    login: (username, password) => dispatch(login(username, password))

  };

}



export default connect(mapStateToProps, mapDispatchToProps)(LoginForm);

This is my login page i want to add header in my page.. I added it already as shown in the code...But unfortunetly error occurs after running.. Where does I put my header and footer tag in my code.. If we put it in form the code runs..But the css applied to the form is affected by adding the footer and header.. So I need the correct way to place header and footer without intrude my form..