Search functionality in reactjs

Question

import React, { PropTypes } from 'react';
 import { Link, browserHistory } from 'react-router';

 import * as DataConnectionAction from '../../actions/dataconnectionAction.jsx';
 import DataConnectionStore from '../../store/dataconnectionstore.jsx';




 class DataSource extends React.Component {

constructor(props) {
    super(props);
    this.state = {
        datasourcelist: [],

    };
    this._dataconnectionStoreChange = this._dataconnectionStoreChange.bind(this);
}

componentWillMount() {
    DataConnectionStore.on('change', this._dataconnectionStoreChange);
}

componentWillUnmount() {
    DataConnectionStore.removeListener('change', this._dataconnectionStoreChange);
}
componentDidMount() {
    DataConnectionAction._getDataSourcesList();
}

_dataconnectionStoreChange(type) {
    if (type == 'DataSourcesList') {
        let datasourcelist = DataConnectionStore._getDataSourceList() || {};
        this.setState({ datasourcelist: datasourcelist.dataconnections });
    }

}

DataSourceView(el) {
    let data = {
        id: el.dataConnectionName
    }

}

_handleSearchChange(e) {

    let value = e.target.value;
    let lowercasedValue = value.toLowerCase();
    let datasourcedata = this.state.datasourcelist;
    let datasourcelist = datasourcedata && datasourcedata.filter(el => el.dataConnectionName.toLowerCase().includes(lowercasedValue));
    this.setState({ datasourcelist });
}

DataSourcesCardUI() {
    let datasourcedata = this.state.datasourcelist;
      return (
        datasourcedata && datasourcedata.map((el) =>
            <div key={el.key}>
                <div className="col-md-3 topadjust">
                    <div className="panel panel-default datasource_panel ">
                        <div className="panel-heading">
                            <h5 className="panel_title"><i className="fa fa-database"></i> &nbsp; {el.dataConnectionName}</h5>


                        </div>
                        <Link className="panel-body" onClick={this.DataSourceView.bind(this, el)}>
                            <div className="datasource_txt text-center">
                                <h6>{el.databaseHost}</h6>
                                <h6>{el.dataConnectionType} </h6>
                                <p>{el.createdDate}</p>
                            </div>
                        </Link>

                    </div>
                </div>

            </div>

        )
    );
}


render() {

    return (
          <div>
                <section className="content_block">
                    <div className="container-fluid">
                        <div className="row dashboard_list">
                            {this.DataSourcesCardUI()}
                        </div>
                    </div>
                </section>
            </div>







    );
}
 }

export default DataSource;

Here I am getting one issue, that is I can able to filter based on the dataConnectionName, but when I am trying to filter with change of name it is filtering from the first filter array data.

But, I need to filter based on data array if i remove and type again.

Example: when I tried search with Cu I am getting properly. but again when i remove Cu and search for User It is not searching from data array It is searching from filter array data. Instead of that when i remove and search with other key it should get filtered from data array.

Please Guide me what i am doing wrong.

Answer 1

Instead of overwriting the data in your state, you could keep a separate array in which you put all the elements that match the search.

Example

let data = [
  {
    dataConnectionName: "Customer_Details",
    dataConnectionType: "NO_SQL",
    databaseHost: "17.8.10.26",
    pluginName: "AGT1_Customer_Details",
    createdDate: "2018-09-23",
    createBy: "Admin"
  },
  {
    dataConnectionName: "User_Details",
    dataConnectionType: "NO_SQL",
    databaseHost: "17.8.10.26",
    pluginName: "AGT1_Customer_Details",
    createdDate: "2018-09-24",
    createBy: "Admin"
  },
  {
    dataConnectionName: "Manager_Details",
    dataConnectionType: "NO_SQL",
    databaseHost: "17.8.10.26",
    pluginName: "AGT1_Customer_Details",
    createdDate: "2018-09-25",
    createBy: "Admin"
  },
  {
    dataConnectionName: "Director_Details",
    dataConnectionType: "NO_SQL",
    databaseHost: "17.8.10.26",
    pluginName: "AGT1_Customer_Details",
    createdDate: "2018-09-26",
    createBy: "Admin"
  }
];

// Give each element a unique id that is used as key
data.forEach(el => el.id = Math.random());

class App extends React.Component {
  state = {
    data,
    filteredData: data
  };

  _handleSearchChange = e => {
    const { value } = e.target;
    const lowercasedValue = value.toLowerCase();

    this.setState(prevState => {
      const filteredData = prevState.data.filter(el =>
        el.dataConnectionName.toLowerCase().includes(lowercasedValue)
      );

      return { filteredData };
    });
  };

  render() {
    const { filteredData } = this.state;

    return (
      <div>
        <input onChange={this._handleSearchChange} placeholder="Search"/>
        {filteredData.map(el => (
          <div key={el.key}>
            <div>
              {el.dataConnectionName} - {el.pluginName} - {el.createdDate} - {el.createBy}
            </div>
          </div>
        ))}
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("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>