to change ui onChange event of dynamically created input boxes in react redux application

export default class SearchOptions extends Component {
  constructor(props) {
     super(props);
     //this.updateFacet = this.updateFacet.bind(this);
     this.onInputBoxChange = this.onInputBoxChange.bind(this);
  }

  /*updateFacet(key,value,isChecked) {
      console.log("updateFacet - " + isChecked);
      this.props.actions.updateFacet(key,value,isChecked,false);
  }*/

  onInputBoxChange(e,items,key) {
     items.map(i => console.log(i.value + " count (" + i.count + ")" ));
     console.log("target - " + e.target.value);
     var keysList = items.filter(i => i.value.toLowerCase().indexOf(e.target.value.toLowerCase().toString()) >= 0 ? true : false);
     console.log(keysList);
  }

  createListKeyValues() {
        const listKeyValues = (
          <div style={{marginLeft:10}}>
          {(()=>{
               return i.items.slice(0,3).map((j) => {

                  const label = j.value.charAt(0).toUpperCase() + j.value.slice(1);
                  const count = j.count && j.count > 0 ? ` (${j.count})` : '';
                        return (<label className="full-checkbox"> { `${label}${count}`}
                              <input type="checkbox" value={j.value}  checked={j.selected} key={j.value}
                                   onClick = {(e) => this.props.actions.updateFacet(i.key,j.value,e.target.checked,false)} />
                                   <span className="checkmark"></span>
                                  </label>)
                      });
          })()}
          </div>
       );

       return listKeyValues;
  }


  render() {
    
    const facet_list2 = this.props.facets.filter(i => i.items.length > 0).map((i) => {
        let inputName =  createSwitchKeySearchBox(i.key);

        //const inputBox = (<input type="text" name={inputName} placeholder={inputName} style={{marginBottom:10}} onChange={(e)=>this.onInputBoxChange(e,i.items)}/>);

        const inputBox = (<div class="inner-addon left-addon">
                             <i class="glyphicon gluphicon-search form-control-search"></i>
                             <input type="text" name={inputName} placeholder={inputName} style={{marginBottom:10}} onChange=
                                 {(e) => this.onInputBoxChange(e,i.items,i.key)} class="form-control" />
                          </div>);

        const keyText = (i.key === "subject")? "keyword":i.key;
        const byKeyText = (<span> By {keyText} </span>);

        const keySearchBox = (
               <div>
                   <div style={{textTransform: "capitalize", marginBottom: 8, display: "inline-block"}}>
                        {byKeyText}
                   </div>
                   {(inputName !== "Default") ? inputBox:null}
               </div>

        );

        const listKeyValues = (
          <div style={{marginLeft:10}}>
          {(()=>{
               return i.items.slice(0,3).map((j) => {

                  const label = j.value.charAt(0).toUpperCase() + j.value.slice(1);
                  const count = j.count && j.count > 0 ? ` (${j.count})` : '';
                        return (<label className="full-checkbox"> { `${label}${count}`}
                              <input type="checkbox" value={j.value}  checked={j.selected} key={j.value}
                                   onClick = {(e) => this.props.actions.updateFacet(i.key,j.value,e.target.checked,false)} />
                                   <span className="checkmark"></span>
                                  </label>)
                      });
          })()}
          </div>
        );

        return (
          <div key={i.key} style={{marginTop: 15}}>
             {keySearchBox}
             {listKeyValues}
             <a href="#" style={{marginLeft: 10, marginTop: 5,fontSize:"14px",fontWeight:"bold",color:'#C25518'}} onClick={() =>
                     this.props.actions.showAdvancedFacets(i.key)}>
                     {i.key === "date" ? "Specify date" : "MORE"}
             </a>
          </div>);
        });

    return (
      <div className="left-sidebar">
        <div className="title">Refine my results</div>
        <div className="facets">
          <div>
            <div className="drop_down_label">Thumbnails</div>
            <DropDownMenu value={this.props.thumbnailSize} onChange={(e, i, size) => this.props.actions.changeThumbnailSize(size)} style={{verticalAlign: "bottom"}}>
              <MenuItem value={0} label="Descriptive" primaryText="Descriptive" />
              <MenuItem value={.5} label="Small" primaryText="Small" />
              <MenuItem value={.75} label="Medium" primaryText="Medium" />
              <MenuItem value={1} label="Large" primaryText="Large" />
            </DropDownMenu>
          </div>

          <div>
            <div className="drop_down_label">Sort by</div>
            <DropDownMenu value={this.props.sortOrder} onChange={(e, i, sort) => this.props.actions.updateSort(sort)} style={{verticalAlign: "bottom"}}>
              <MenuItem value="relevance" label="Relevance" primaryText="Relevance" />
              <MenuItem value="date" label="Oldest first" primaryText="Oldest first" />
              <MenuItem value="date_descending" label="Newest first" primaryText="Newest first" />
            </DropDownMenu>
          </div>

          {facet_list2}

          {/*
            this.props.facets.length === 0 ? null :
            (
              <div style={{marginTop: 20}}><a href="#" onClick={() => this.props.actions.updateFacetBatch({})}>Reset Filters</a></div>
            )*/
          }
          {
              this.props.facets.length === 0 ? null :
              (
                  <button className="btn" onClick={() => this.props.actions.updateFacetBatch({})}>
                      <div id = "btn_container">
                          <img src="../../../static/images/reset-filters.jpg" style={{width:"30px",height:"30px"}}/>
                      </div>
                      <span>RESET FILTERS</span>
                  </button>
              )
          }
        </div>
      </div>);
  }
}

Select allOpen in new window