React, trying to check if a value is present in array

Question

I have an array licenseKeys in React state, and need to push to it all new values of lisenceKey's that user types to input fields. It works, but when I'm trying to check whether value of new key is present in array this.state.licenseKeys.includes(this.state.licenseKey), I'm getting an error Uncaught TypeError: Cannot read property 'includes' of undefined. I tried to use an arrow function with some instead, but I got the same error Uncaught TypeError: Cannot read property 'some' of undefined. What am I doing wrong here?

 if (localStorage.getItem("formData")) {
  this.state = JSON.parse(localStorage.getItem("formData"));
} else {
  this.state = {
    ppks: [],
    alert: false,
    ipState: "",
    portState: "",
    userNameState: "",
    passwordState: "",
    licenseKey: "",
    licenseKeys: [],
    licenseKeysObject: []
   // refreshButttonDisabled: true
}    
    }

 licenseKeysSetter = () => {
    if (this.state.licenseKey !== "" && this.state.licenseKeys.includes(this.state.licenseKey) === false){          
        this.setState({
            licenseKeys: [ ...this.state.licenseKeys || [], this.state.licenseKey]              
        }, () => {
            console.log(this.state.licenseKeys);            
        });
    }   
  }

.....
<ul>
      {ppkData.map((item, index) => {   
       if (item.model === "8l") {  
        return (
          <div className="ppkCard" key={index + 1}>

          <form>
          <div className="input-group input-group-sm mb-3">
          <div className="input-group-prepend">
            <span className="input-group-text" id="inputGroup-sizing-sm">Enter License Key</span>
          </div>
          <input type="text"
                 className="form-control"
                 placeholder="000-000-000-000-000-000" 
                 onChange={this.licenseKeysHandler}
                 value={this.state.licenseKey || ''} 
                 aria-label="Small" 
                 aria-describedby="inputGroup-sizing-sm" />
        </div>       
        <button type="button" onClick={this.licenseKeysSetter} >Save</button>     
        </form>
.........

 licenseKeysHandler = (event) => {      
    this.setState({licenseKey: event.target.value}, () => {
        console.log(this.state.licenseKey);
    })      
  }

What is value of that array inside licenseKeysSetter() , please add console.log there and tell. — Tejas
– Tejas, Commented Nov 21, 2019 at 8:43
Try this.state.licenseKeyintead of this.state.licenseKey !== "" — Maxime Girou
– Maxime Girou, Commented Nov 21, 2019 at 8:43
If you define your state out of constructor drop this part. just use it as state = ... — devserkan
– devserkan, Commented Nov 21, 2019 at 9:07
this.state = JSON.parse(localStorage.getItem("formData")); is the most likely place that sets this.state.licenseKeys to undefined. can you please console.log(localStorage.getItem("formData"))? — Aprillion
– Aprillion, Commented Nov 21, 2019 at 9:52

Aprillion · Accepted Answer · 2019-11-21 09:58:17Z

1

If localStorage does not include all keys necessary in the state (e.g. after a new version release), you can separate initial state from loading localStorage like this:

class MyComponent() {
  state = {
    ppks: [],
    alert: false,
    ipState: "",
    portState: "",
    userNameState: "",
    passwordState: "",
    licenseKey: "",
    licenseKeys: [],
    licenseKeysObject: []
  }  
  componentDidMount() {
    this.setState(JSON.parse(localStorage.getItem("formData")))   
  }
  ...
}

answered Nov 21, 2019 at 9:58

Aprillion

22.4k6 gold badges59 silver badges94 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Yurii · Accepted Answer · 2019-11-21 09:56:22Z

0

I changed code like this, and it works fine for me...

 licenseKeysSetter = () => {
    //console.log(this.state.licenseKey);
    console.log(this.state.licenseKeys);
    //console.log(this.state);
    if (this.state.licenseKeys === undefined) {
        if (this.state.licenseKey !== "" ){         
        this.setState({
            licenseKeys: [ ...this.state.licenseKeys || [], this.state.licenseKey]              
        }, () => {
            console.log(this.state.licenseKeys);            
        });
    } 
  } else {      
    if (this.state.licenseKey !== "" && !this.state.licenseKeys.includes(this.state.licenseKey)){            
        //console.log(this.state.licenseKeys);
        this.setState({
            licenseKeys: [ ...this.state.licenseKeys || [], this.state.licenseKey]              
        }, () => {
            console.log(this.state.licenseKeys);            
        });
    }  
    }   
  }

answered Nov 21, 2019 at 9:56

Yurii

3334 silver badges23 bronze badges

1 Comment

user11910739 Over a year ago

It's better to identify the actual issue instead of updating the working code.

Collectives™ on Stack Overflow

React, trying to check if a value is present in array

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related