CODEWITHSUNDEEP
javascriptreactjsif-statement
user9345978
user9345978

Reputation:

if or condition doesn't work

I'm new to javascript and I want to run some code depending if the state.value != null or "".it doesn't throw an error but freezes there. please see my code down below.any help would be really appreciated.

constructor(){
    super();
    this.state = {
        value:null,
        list:[]
    }
}

handleList = () => {
    //let list = this.state.list.slice();
    if (this.state.value != null || this.state.value.length() > 0 ) {
        let list = [...this.state.list];
        list.push(<li>{this.state.value}</li>);

        this.setState({list});
        console.log(list.length,this.state.list.length);
    }else{
        console.log("Cant enter null");
    }
}


render() {

    return(
        <div className = 'global'>

           <button onClick={() => {this.handleList()}
            }>Add-New</button>
            <input 
                onChange = {
                    (e)=>{this.setState({value: e.target.value})}
                }
                type = 'text' 
                placeholder = 'Enter New Todo!'/>
            <hr/>
            <ul>
                {
                    this.state.list.map((li) => {
                        return (li);
                    })
                }
            </ul>

        </div>
    );
}

}

Upvotes: 1

Views: 123

Answers (2)

Alister
Alister

Reputation: 463

Because you are using OR, both criteria are checked. So even if value is NULL, the code is still attempting to check the length of the string. But a NULL object doesn't have a "length" property, so this will result in an "value does not have property: length" error. To fix this, using AND ( && ) would be more appropriate.

Additionally, the "length" property is a value, not a function, so attempting to call as function will result in an "length is function of value" error.

These errors should appear in the console when viewing your web-page. If you press F12, a window should appear at the bottom of your browser. If you then select the console tab, you should be able to see all errors output. You might need to make sure you aren't filtering error messages.

Upvotes: 0

Arman Charan
Arman Charan

Reputation: 5797

Evaluating the existence of Strings

In JavaScript: empty Strings '' are falsey (evaluate to false).

const x = ''
if (x) console.log('x = true')
else console.log('x = false')

As a result, the existence of this.state.value be tersely verified as follows:

if (this.state.value) .. // Do something if this.state.value != ''

This strategy can be leveraged and chained by simply referencing variables followed by && (which results in only the last truthy variable being returned). If no truthy variable is found: false is returned. ie. in the case of the onClick method of the <button/> tag below.

Rendering Lists

In React: it is typical to store lists of plain variables (Strings, Objects, etc) and handle conversion to element form on the fly.

Rendering Strings representing HTML elements is a security flaw. In production: someone could very easily type a malicious todo and ruin your entire application. You may need to use dangerouslySetInnerHTML if you wish to continue down that path.

See the docs for more info on how to render lists.

Example

See below for a rough example of a todo container.

// Container.
class Container extends React.Component {

  // Constructor.
  constructor(props) {
    super(props)
    this.state = {
      value: '',
      list: []
    }
  }

  // Render.
  render = () => (
    <div className = 'global'>
     <button onClick={() => this.state.value && this.setState({value: null, list: [...this.state.list, this.state.value]})}>Add</button>
      <input value={this.state.value} onChange={(e) => this.setState({value: event.target.value})}  placeholder="Todo.."/>
      <hr/>
      <ul>
        {(this.state.list.length > 0 && (this.state.list.map((todo, index) => <li key={index}>{todo}</li>))) || '..'}
      </ul>
    </div>
  )

}

// Mount.
ReactDOM.render(<Container/>, document.querySelector('#root'))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

Upvotes: 1

Related Questions