title: How to send password in encrypted form from ReactJS to ExpressJS?
body: <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>const form = {
          firstname: "",
          lastname: "",
          email: "",
          password: "",
          gender: "",
          dob: "",
          username: ""
  };
  
  export default class Login extends React.Component {
    constructor (props) {
      super(props);
      this.handleSubmit = this.handleSubmit.bind(this);
      this.state = {
      }
    }
  
    handleSubmit (event) {
      event.preventDefault();
      api.signin(this.state)
    }
  
    handleChange (event, type) {
      form[type] = event.target.value;
      this.setState({
        form
      })
    }
  
    render() {
      return (
        &lt;div&gt;
          &lt;nav className="navbar navbar-expand-md navbar-dark bg-dark fixed-top"&gt;
            &lt;a className="navbar-brand" href="#"&gt;ChatBox&lt;/a&gt;
            &lt;button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault"&gt;
              &lt;span className="navbar-toggler-icon"&gt;&lt;/span&gt;
            &lt;/button&gt;
  
            &lt;div className="collapse navbar-collapse" id="navbarsExampleDefault"&gt;
              &lt;ul className="navbar-nav mr-auto"&gt;
                &lt;li className="nav-item active"&gt;
                  &lt;a className="nav-link" href="#"&gt;Home &lt;span className="sr-only"&gt;(current)&lt;/span&gt;&lt;/a&gt;
                &lt;/li&gt;
                &lt;li className="nav-item"&gt;
                  &lt;a className="nav-link" href="#"&gt;Link&lt;/a&gt;
                &lt;/li&gt;
                &lt;li className="nav-item"&gt;
                  &lt;a className="nav-link" href="#"&gt;Disabled&lt;/a&gt;
                &lt;/li&gt;
                &lt;li className="nav-item dropdown"&gt;
                  &lt;a className="nav-link dropdown-toggle" href="http://example.com" id="dropdown01" data-toggle="dropdown"&gt;Dropdown&lt;/a&gt;
                  &lt;div className="dropdown-menu" aria-labelledby="dropdown01"&gt;
                    &lt;a className="dropdown-item" href="#"&gt;Action&lt;/a&gt;
                    &lt;a className="dropdown-item" href="#"&gt;Another action&lt;/a&gt;
                    &lt;a className="dropdown-item" href="#"&gt;Something else here&lt;/a&gt;
                  &lt;/div&gt;
                &lt;/li&gt;
              &lt;/ul&gt;
            &lt;/div&gt;
          &lt;/nav&gt;
          &lt;main role="main" className="container"&gt;
            &lt;div className="starter-template"&gt;
              &lt;h1&gt;Register for ChatBox&lt;/h1&gt;
              &lt;form &gt;
                &lt;div className="d-flex justify-content-center bd-highlight mb-3"&gt;
                  &lt;div className="p-2"&gt;
                    &lt;label htmlFor="firstname"&gt;First Name&lt;/label&gt;
                    &lt;input type="text" className="form-control" id="firstname" placeholder="First Name" onChange={
                      (e)=&gt;{ this.handleChange(e, 'firstname')}
                    }/&gt;
                  &lt;/div&gt;
                  &lt;div className="p-2"&gt;
                    &lt;label htmlFor="lastname"&gt;Last Name&lt;/label&gt;
                    &lt;input type="text" className="form-control" id="lastname" placeholder="Last Name" onChange={
                      (e)=&gt;{ this.handleChange(e, 'lastname')}
                    } /&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
                &lt;div className="form-group col-md-6"&gt;
                  &lt;label htmlFor="inputEmail4"&gt;Email&lt;/label&gt;
                  &lt;input type="email" className="form-control" id="inputEmail4" placeholder="Email" onChange={
                      (e)=&gt;{ this.handleChange(e, 'email')}
                    }/&gt;
                &lt;/div&gt;
                &lt;div className="form-group col-md-6"&gt;
                  &lt;label htmlFor="username"&gt;Username&lt;/label&gt;
                  &lt;input type="text" className="form-control" id="username" placeholder="Username" onChange={
                      (e)=&gt;{ this.handleChange(e, 'username')}
                    }/&gt;
                &lt;/div&gt;
                &lt;div className="form-group col-md-6"&gt;
                  &lt;label htmlFor="inputPassword4"&gt;Password&lt;/label&gt;
                  &lt;input type="password" className="form-control" id="inputPassword4" placeholder="Password" onChange={
                      (e)=&gt;{ this.handleChange(e, 'password')}
                    }/&gt;
                &lt;/div&gt;
                &lt;div className="form-group col-md-6"&gt;
                  &lt;label htmlFor="gender"&gt;Gender&lt;/label&gt;
                  &lt;select id="gender" className="form-control" onChange={ (e)=&gt;{ this.handleChange(e, 'gender')} }&gt;
                    &lt;option &gt;Choose...&lt;/option&gt;
                    &lt;option value="male"&gt;Male&lt;/option&gt;
                    &lt;option value="female"&gt;Female&lt;/option&gt;
                  &lt;/select&gt;
                &lt;/div&gt;
                &lt;div className="form-group col-md-6 " &gt;
                  &lt;label htmlFor="date"&gt;D.O.B&lt;/label&gt;
                  &lt;input type="date" className="form-control" id="date" placeholder="date" onChange={ (e)=&gt;{ this.handleChange(e, 'dob')} }/&gt;
                &lt;/div&gt;
                &lt;div className="form-group col-md-2"&gt;
                  &lt;input type="submit" onClick={this.handleSubmit} className="form-control bg-info text-white" id="submit" placeholder="Password" /&gt;
                &lt;/div&gt;
              &lt;/form&gt;
            &lt;/div&gt;
          &lt;/main&gt;
        &lt;/div&gt;
      )
    }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>Is it a good practice to store the form data in state like this or is there any better way?  </p>
  
  <p>and password entered can be seen as plain text from devtools. how to avoid this i mean any way to encrypt password and send it to backend.</p>
  
  <p>I'm very new to this. Will be helpful if someone check if this is good practice for writing code.</p>