title: All checkboxes values in one array
body: <p>Want to get all selected check box values in one array. But onChange function is giving error as undefined. I have posted the full component here.</p>
  
  <p>I need
  checkedValues =[]`</p>
  
  <p>let my imgUrls: 
  imgUrls = [ "<a href="https://dummyimage.com/100x100/bc6666/FFFFFF/&amp;text=img-3" rel="nofollow noreferrer">https://dummyimage.com/100x100/bc6666/FFFFFF/&amp;text=img-3</a>","<a href="https://dummyimage.com/100x100/bc6666/FFFFFF/&amp;text=img-4" rel="nofollow noreferrer">https://dummyimage.com/100x100/bc6666/FFFFFF/&amp;text=img-4</a>","<a href="https://dummyimage.com/100x100/bc6666/FFFFFF/&amp;text=img-5" rel="nofollow noreferrer">https://dummyimage.com/100x100/bc6666/FFFFFF/&amp;text=img-5</a>","<a href="https://dummyimage.com/100x100/bc6666/FFFFFF/&amp;text=img-6" rel="nofollow noreferrer">https://dummyimage.com/100x100/bc6666/FFFFFF/&amp;text=img-6</a>"]</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var checkedValue =["https://dummyimage.com/100x100/bc6666/FFFFFF/&amp;text=img-4","https://dummyimage.com/100x100/bc6666/FFFFFF/&amp;text=img-5"]`
  
  var imgUrls = [ "https://dummyimage.com/100x100/bc6666/FFFFFF/&amp;text=img-3","https://dummyimage.com/100x100/bc6666/FFFFFF/&amp;text=img-4","https://dummyimage.com/100x100/bc6666/FFFFFF/&amp;text=img-5","https://dummyimage.com/100x100/bc6666/FFFFFF/&amp;text=img-6"]
  
  import React from 'react';
  
  
  export default class Mycomp extends React.Component {
  
  constructor(props) {
      super(props);
      this.url = "https://dummyimage.com/100x100";
      this.count = 0;
      this.tempImgUrls = [];
  
      this.state = {
          bgColor: '#bc6666',
          textColor: '#FFFFFF',
          imgCountsStart: 0,
          imgCountsEnd: 0,
          imgUrls: [],
          showMore: false,
          slectedItems: 0,
          checkedValues: []
      }
  }
  
  bgColorhandleChange = (event) =&gt; {
      this.setState({
          bgColor: event.target.value
      });
  }
  textColorhandleChange = (event) =&gt; {
      this.setState({
          textColor: event.target.value
      });
  }
  imgCountsStarthandleChange = (event) =&gt; {
      this.setState({
          imgCountsStart: event.target.value
      })
  }
  imgCountsEndhandleChange = (event) =&gt; {
      this.setState({
          imgCountsEnd: event.target.value
      })
  }
  myhandelchange = (event) =&gt; {
      this.setState({
          ischecked: true
      })
  }
  handleSubmit = () =&gt; {
      this.tempImgUrls = [];
      this.setState({
          imgUrls: this.tempImgUrls
      })
  
      this.count = 0;
      for (let i = 0; i &lt;= this.state.imgCountsEnd - this.state.imgCountsStart; i++) {
          let imgtextcount = parseFloat(this.count) + parseFloat(this.state.imgCountsStart)
          this.url = this.url + "/" + this.state.bgColor.slice(1) + '/' + this.state.textColor.slice(1) + '/' +
              '&amp;text=img-' + imgtextcount
          this.count += 1;
          this.tempImgUrls.push(this.url);
          this.url = 'https://dummyimage.com/100x100';
      }
      this.setState({
          imgCountsEnd: 0
      });
      this.setState({
          imgCountsStart: 0
      });
  
      console.log(this.tempImgUrls)
  
      if (this.state.imgCountsEnd - this.state.imgCountsStart &lt; 10) {
          this.setState({
              imgUrls: this.tempImgUrls
          })
      } else if (this.state.imgCountsEnd - this.state.imgCountsStart &gt; 10) {
          this.setState({
              showMore: true
          })
          let tempvari = this.tempImgUrls.slice(0, 10)
  
          this.setState({
              imgUrls: tempvari
          })
          this.tempImgUrls = this.tempImgUrls.slice(10);
      }
  } 
  
  loadMoreImage = () =&gt; {
      this.setState({
          imgUrls: []
      })
      let tempvari2 = this.tempImgUrls.slice(0, 10);
      this.setState({
          imgUrls: tempvari2
      })
      this.tempImgUrls = this.tempImgUrls.slice(10);
      if (this.tempImgUrls.length === 0) {
          this.setState({
              showMore: false
          })
      }
  }
  clearAll = () =&gt; {
      this.setState({
          bgColor: '#bc6666',
          textColor: '#FFFFFF',
          imgCountsStart: 0,
          imgCountsEnd: 0,
          imgUrls: [],
          showMore: false,
      })
  }
  
  render() {
      return (
          &lt;React.Fragment&gt;
              &lt;form&gt;
                  &lt;div className="form-row"&gt;
                      &lt;div className="form-group col-md-3"&gt;
                          &lt;label htmlFor="bgColorImg"&gt;Background Color of Image&lt;/label&gt;
                          &lt;input type="color" className="form-control" id="bgColorImg" placeholder="Color"
                              value={this.state.bgColor} onChange={this.bgColorhandleChange} /&gt;
                      &lt;/div&gt;
                      &lt;div className="form-group col-md-3"&gt;
                          &lt;label htmlFor="textColor"&gt;Color Of The Text&lt;/label&gt;
                          &lt;input type="color" className="form-control" id="textColor" placeholder="Input Color"
                              value={this.state.textColor} onChange={this.textColorhandleChange} /&gt;
                      &lt;/div&gt;
                      &lt;div className="form-group col-md-3"&gt;
                          &lt;label htmlFor="imgCountsStart"&gt;No. Of Images starting at&lt;/label&gt;
                          &lt;input type="number" min={0} className="form-control" id="imgCountsStart" placeholder="No of Image start"
                              value={this.state.imgCountsStart} onChange={this.imgCountsStarthandleChange} /&gt;
                      &lt;/div&gt;
                      &lt;div className="form-group col-md-3"&gt;
                          &lt;label htmlFor="imgCountsEnd"&gt;No. Of Images ends at&lt;/label&gt;
                          &lt;input type="number" min={0} className="form-control" id="imgCountsEnd" placeholder="No of Imageend "
                              value={this.state.imgCountsEnd} onChange={this.imgCountsEndhandleChange} /&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;button type="button" className="btn btn-secondary" onClick={this.handleSubmit}
                      onChange={this.disableBtn} disabled={this.state.imgCountsEnd === 0 &amp;&amp; this.state.imgCountsStart === 0}&gt;Show Photos&lt;/button&gt;
                  &lt;button type="button" className="btn btn-secondary" onClick={this.clearAll}
                      disabled={this.state.imgUrls.length === 0} &gt;Clear All&lt;/button&gt;
              &lt;/form&gt;
  
              {/* &lt;div&gt;Showing from {this.state.imgCountsStart} to {this.state.imgCountsEnd}&lt;/div&gt; */}
              &lt;div&gt;
                  &lt;ul&gt;
                      {this.state.imgUrls.map(function (name, index) {
                          return &lt;li key={index}&gt;
                              &lt;input type="checkbox" id={name} name={name}/&gt;
                              &lt;label htmlFor={name}&gt;
                                  &lt;img alt={name} src={name} value={name} /&gt;
                              &lt;/label&gt;
                          &lt;/li&gt;
                      })}
                  &lt;/ul&gt;
              &lt;/div&gt;
                      
              {this.state.showMore ? &lt;button className='btn btn-warning' onClick={this.loadMoreImage}&gt;Load More&lt;/button&gt; : ''}
  
              &lt;button disabled={this.state.slectedItems == 0} type="button" className="btn btn-md btn-secondary"
                  data-toggle="modal" data-target="#myModal"&gt;
                  Your Selection
              &lt;/button&gt;
              &lt;div className="modal" id="myModal"&gt;
                  &lt;div className="modal-dialog"&gt;
                      &lt;div className="modal-content"&gt;
                          &lt;div className="modal-header"&gt;
                              &lt;h4 className="modal-title"&gt;Total Number of Selection&lt;/h4&gt;
                              &lt;button type="button" className="close" data-dismiss="modal"&gt;&amp;times;&lt;/button&gt;
                          &lt;/div&gt;
                          &lt;div className="modal-body"&gt;
                              Selected Items :
                          &lt;/div&gt;
                          &lt;div className="modal-footer"&gt;
                              &lt;button type="button" className="btn btn-danger" data-dismiss="modal"&gt;Close&lt;/button&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/React.Fragment&gt;
      )
  }
  }</code></pre>
  </div>
  </div>
  </p>