react-TypeError：无法读取未定义的属性'trim'

Question

I'm not sure what I'm doing wrong here.

class Login extends Component {

    render() {
        const username = "me@domain.com  ";
        console.log(username)
        const password = this.refs.password;
        const creds = {
            username: username.value.trim(),
            password: password.value.trim()
        };
        const errorMessage  = this.props;

        return ( ... ) } }

console shows "me@domain.com" yet it's erroring on username: username.value.trim()

  11 | console.log(username)
  12 | const password = this.refs.password;
  13 | const creds = {
> 14 |     username: username.value.trim(),
  15 |     password: password.value.trim()
  16 | };
  17 | const errorMessage  = this.props;

Answer 1

username.value.trim()

username itself a String, you need not to get value out of it. Just trim.

const creds = {
        username: username.trim(),
        password: password.value.trim()
    };

Answer 2

username is not an object but a string string and hence you would write

const username = "me@domain.com  ";
const creds = {
        username: username.trim(),
        password: password.trim()
    };

Also you shouldn't use string refs as they are deprecated.