ReactJS: Cannot get the length of a string in component state - reactjs

Question

I have a little problem. In my function isLoginOk() it never enters into the if. It enters every time in the else even if my string is longer than 1 char.
When I console.log before the if I can see that my string is longer than 1 yet it doesn't go into the if!
Why is that? (I have verified that the string in my component state is correctly updated by handleChange())
export default class InputLogin extends React.Component {
constructor(props) {
super(props);
this.state = {
login: "",
}
};
handleChange = (e) => {
this.setState({
[e.target.name]: [e.target.value]
});
}
isLoginOk() {
if (this.state.login.length > 1) {
return (<div>OK</div>);
} else {
return (<div>ERROR</div>);
}
}
render() {
return (
<div>
<input type="text" name="login" value={this.state.login} onChange={this.handleChange} /> {this.isLoginOk()}
</div>
);
}
}

Answer 1

It looks like an inconsitency with the way you're setting the component state in handleChange() versus the way isLoginOk() expects the state to be defined.
In the handleChange() function, the "square bracket" syntax [e.target.value] means that you're setting the state value for key [e.target.name] as an array:
this.setState({
// Brackets around [e.target.value] creates array value
[e.target.name]: [e.target.value]
});
The isLoginOk() function however, expects the value to be a string rather than an array:
isLoginOk() {
// You're accessing the string directly and not as an array item
if (this.state.login.length > 1) {
return (<div>OK</div>);
} else {
return (<div>ERROR</div>);
}
}
Consider revising your handleChange() function like so to ensure that the state is updated in a way that is compatible with isLoginOK():
handleChange = (e) => {
this.setState({
[e.target.name]: e.target.value // Remove the [ and ] around value
});
}

Answer 2

There is a bug in your code, in your handleChange value.
[e.target.name]: [e.target.value]
You're setting the value of this.state.login to ['some input']. Your validation always fails because you can't get the length of the string inside the array using this.state.login.length. Your validation will return either 0 or 1 based on the array length, certainly not what you intended.
To fix this, remove the brackets around [e.target.value].
class InputLogin extends React.Component {
constructor(props) {
super(props)
this.state = {
login: ""
}
}
handleChange = (e) => {
this.setState({
[e.target.name]: e.target.value
});
}
render() {
const { login } = this.state;
const loginResult = login.length > 1 ? "OK" : "ERROR";
return (
<div>
<input type="text" name="login" value={login} onChange={this.handleChange} />
{loginResult}
</div>
)
}
}
ReactDOM.render(<InputLogin />, document.querySelector("#app"))
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.0/umd/react-dom.production.min.js"></script>
<div id="app"></div>
http://jsfiddle.net/n5u2wwjg/261779/

Answer 3

Remove the brackets around e.target.value
Also simplify the render and get rid of the isLoginOk function. Seems unnecessary.
<input type="text" name="login" value={this.state.login} onChange={this.handleChange} />
<div>{ this.state.login.length > 1 ? 'OK' : 'ERROR' }</div>