Bdtjtk

In my React Table multi-select I have a parent page and a child page I have a child page and a parent page. The parent page contains the data while the child page has the multi-select dropdowns.

I am able to filter properly but when I submit the filter and then open the filter again, the filters are not showing in the placeholder position as shown below. I am getting that selected option in the drop down, the other options are not showing. I need to have the selected option in the placeholder while all options in the drop down. This will be followed for all drop down selectors.

The above screenshot is when I select a particular column's filter checkbox

After submitting and trying to filter again I am getting this

This is the code of my Parent page (the page which has the data on which I am applying filter)

import React from "react";

import { render } from "react-dom";

import { makeData } from "./Utils"; // eslint-disable-line

// import matchSorter from "match-sorter";



// import Select from "react-select";

// import "react-select/dist/react-select.css";



import Child from './Child/Child'

import jsondata from './sample'



// Import React Table

import ReactTable from "react-table";

import "react-table/react-table.css";



class App extends React.Component {

  constructor() {

    super();

    this.state = {

      // data: makeData(),

      data: jsondata,

      dataDefault: jsondata,

      filtered: ,

      select2: null,

      select3: null,

      childOpen: false

    };

    this.openChild = this.openChild.bind(this);

    this.applyFilter = this.applyFilter.bind(this);

    this.showDefaultView = this.showDefaultView.bind(this);

  }



  applyFilter(filtered) {

    console.log('Entering Apply Filter Function of Parent');

    console.log('The filtered data in parent ' + JSON.stringify(filtered));

    const currentStateChild = this.state.childOpen;

    this.setState({

      childOpen: !currentStateChild

    }, () => {

      console.log('Child is opened ' + this.state.childOpen);

    });

    const filterArray = filtered;

    const apidata = this.state.data;

    let filteredData = apidata.filter(item =>        // filter jsondata

      filterArray.every( f =>                // so every member of filter array

           f.value.includes(item[f.id])) )   // has a corresponding item[id] in value



    console.log('The filtered rows are ' + JSON.stringify(filteredData));

    this.setState({

      data: filteredData

    }, () => {

      console.log('Manipulated rows ' + this.state.data);

    });

  }



  openChild() {

    const currentStateChild = this.state.childOpen;

    this.setState({

      childOpen: !currentStateChild

    }, () => {

      console.log('Child is opened ' + this.state.childOpen);

    });

  }



  showDefaultView() {

    const defaultDataParent = this.state.dataDefault;

    this.setState({

      data: defaultDataParent

    }, () => {

      console.log('Default rows ' + this.state.data);

    });

  }



  render() {

    const { data } = this.state;

    return (

      <div>

        <div className='clickMeToOpenChild' onClick={this.openChild} > Click Me to Open Child</div>

        <div className='clickMeToGetDefaultView' onClick={this.showDefaultView} > Click Me to show Default View</div>

        <br />

        <br />

        <ReactTable

          data={data}

          filterable

          filtered={this.state.filtered}

          onFilteredChange={(filtered, column, value) => {

            this.onFilteredChangeCustom(value, column.id || column.accessor);

          }}

          defaultFilterMethod={(filter, row, column) => {

            const id = filter.pivotId || filter.id;

            if (typeof filter.value === "object") {

              return row[id] !== undefined

                ? filter.value.indexOf(row[id]) > -1

                : true;

            } else {

              return row[id] !== undefined

                ? String(row[id]).indexOf(filter.value) > -1

                : true;

            }

          }}

          columns={[

            {

              Header: "Name",

              columns: [

                {

                  Header: "First Name",

                  accessor: "firstName"

                },

                {

                  Header: "Last Name",

                  id: "lastName",

                  accessor: d => d.lastName

                }

              ]

            },

            {

              Header: "Info",

              columns: [

                {

                  Header: "Age",

                  accessor: "age"

                },

              ]

            }

          ]}

          defaultPageSize={10}

          className="-striped -highlight"

        />

        {this.state.childOpen &&

        <Child

          data={data}

          applyFilter={this.applyFilter}

        />}

        <br />

      </div>

    );

  }

}



render(<App />, document.getElementById("root"));

This is the code of my child page (the page which has the multi select dropdowns - there are just 2 dropdowns at the moment, I will add more in future)

import React, { Component } from 'react'; // eslint-disable-line

import PropTypes from 'prop-types'; // eslint-disable-line

// import uniqBy from 'lodash';

// import _ from 'lodash';

import Select from 'react-select';

import 'react-select/dist/react-select.css';

// import { bindActionCreators } from 'redux';

// import { connect } from 'react-redux';

import './Child.css';



class Child extends Component {

    constructor(props) {

      super(props);

      this.state = {

        data: this.props.data,

        filtered: ,

        select2: null,

        select3: null,

      };

      // this.findUnique = this.findUnique.bind(this);

      this.getOptions = this.getOptions.bind(this);

    }



    getOptions(propertyName) {

      return this.state.data.reduce((accum, elem, i) => {

        const accumulator = [...accum];

        if (!accumulator.some(e => e.value === elem[propertyName])) {

          accumulator.push({

            id: i,

            value: elem[propertyName],

            label: elem[propertyName]

          });

        }

        return accumulator;

      }, );

    }



    onFilteredChange(value, accessor) {

      const { filtered } = this.state;

      let insertNewFilter = 1;

      if(filtered.length) {

        filtered.forEach((filter, i) => {

          if(filter.id === accessor) {

            if(value === '' || !value.length) filtered.splice(i, 1);

            else filter.value = value;// eslint-disable-line



            insertNewFilter = 0;

          }

        });

      }



      if(insertNewFilter) {

        filtered.push({ id: accessor, value });

      }



      this.setState({ filtered });

    }



    render() {

      console.log('Entering Child Render Method');

      const { data } = this.state; // eslint-disable-line

      const { filtered } = this.state; // eslint-disable-line

      console.log('filtered items in child ' + JSON.stringify(this.state.filtered));

    //   console.log('data in child ' + JSON.stringify(this.state.data));

      return (

        <div className='filter-child' >

          <div className='submitChild' onClick={() => { this.props.applyFilter(filtered); }}> Click Me to Submit Child

          </div>

          <div>

          Select First Name :{" "}

        <Select

          style={{ width: "50%", marginBottom: "20px" }}

          onChange={entry => {

            this.setState({ select2: entry });

            this.onFilteredChange(

              entry.map(o => {

                return o.value;

              }),

             'firstName'

            );

          }}

          value={this.state.select2}

          multi={true}

          options={this.getOptions("firstName")}

        />

        Select Last Name :{" "}

        <Select

          style={{ width: "50%", marginBottom: "20px" }}

          onChange={entry => {

            this.setState({ select3: entry });

            this.onFilteredChange(

              entry.map(o => {

                return o.value;

              }),

              "lastName"

            );

          }}

          value={this.state.select3}

          multi={true}

          options={this.getOptions("lastName")}

        />

          </div>

        </div>

      );

    }

  }



  Child.propTypes = {

    data: PropTypes.arrayOf(PropTypes.shape({})).isRequired,

    applyFilter: PropTypes.func.isRequired

  };



  Child.defaultProps = {

  };





  export default Child;

This is the sample json object file from where I am getting data

const jsonData = [

  {

    firstName: "Sam",

    lastName: "Jones",

    age: "10"

  },

  {

    firstName: "Sam",

    lastName: "Jones1",

    age: "10"

  },

  {

    firstName: "Sam2",

    lastName: "Jones1",

    age: "12"

  },

  {

    firstName: "Sam3",

    lastName: "Jones3",

    age: "13"

  },

  {

    firstName: "Sam4",

    lastName: "Jones4",

    age: "14"

  },

  {

    firstName: "Sam5",

    lastName: "Jones5",

    age: "15"

  },

  {

    firstName: "Sam",

    lastName: "Jones11",

    age: "16"

  },

  {

    firstName: "Sam6",

    lastName: "Jones6",

    age: "17"

  },

  {

    firstName: "Sam7",

    lastName: "Jones7",

    age: "18"

  },

  {

    firstName: "Sam8",

    lastName: "Jones8",

    age: "19"

  },

  {

    firstName: "Sam9",

    lastName: "Jones9",

    age: "20"

  },

  {

    firstName: "Sam10",

    lastName: "Jones10",

    age: "21"

  },

  {

    firstName: "Sam11",

    lastName: "Jones11",

    age: "22"

  },

  {

    firstName: "Sam12",

    lastName: "Jones12",

    age: "23"

  }

];



  export default jsonData;

I need a generalized solution which can be applied to any number of dropdowns.

Even after submitting the child page (the page having the drop downs) my drop down should look like screenshot 1 but what I am getting is a look of screenshot 2. When I submit the filter and then open the filter again, the filters are not showing in the placeholder position as shown below. I am getting that selected option in the drop down, the other options are not showing. I need to have the selected option in the placeholder while all options in the drop down. This will be followed for all drop down selectors.