Atlassian React Components - TextField Not Accepted

Question

I am trying to implement Atlassian React Components in my application.

But TextField is not behaving like normal input text field.

It is not forwarding value while submitting form, and giving warning in console

Warning: styled.input is changing an uncontrolled input of type text to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component.

import React, { Component } from 'react';
import { login, resetPassword } from '../helpers/auth';
import TextField from '@atlaskit/field-text';

function setErrorMsg(error) {
  return {
    loginMessage: error
  }
}

export default class Login extends Component {
  state = { loginMessage: null }
  handleSubmit = (e) => {
   e.preventDefault()
   login(this.email.value, this.pw.value)
     .catch((error) => {
         //catch errors
      })
 }

  render () {
    return (
      <form onSubmit={this.handleSubmit}>
          <div className="form-group">
            <label>Email</label>
            //THIS TEXTFIELD IS MAKING ISSUE

            <TextField autoFocus ref={(email) => this.email = email} placeholder="Email" label="" />
         </div>
         <div className="form-group">
            <label>Password</label>
            <input type="password" className="form-control" placeholder="Password" ref={(pw) => this.pw = pw} />
        </div>

         <button type="submit" className="btn btn-primary">Login</button>
     </form>
    )
  }
}

Answer 1

I just faced this problem. To solve it you just need to add prop value="" to your <TextField>