Function .filter() in ReactJs

Question

There is JSON called by fetch() request looks like this:

[{
"Info": "",
"Val": "3"
},
{
"Info": "",
"Val": "5"
},
{
"Info": "",
"Val": "1"
},
{
"Info": "",
"Val": "1"
}]

My purpose is to filter data according a filed called Val.

 library = library.filter(item =>
             item.Val==FilterVal
 )

Let me make an example to explain what I want to do. Look at this input :<input value={this.state.FilterVal} onChange={this.handlerFilter} />

FilterVal is going to be a number for example 1 or some numbers separated by comma 1,5,4 . For example user types 1 on input ,the result must return the objects that Valis 1. For the next time type 1,5,4must return me the objects that Val are 1 and 5 and 4.

Here is a piece of my code:

  class App extends React.Component {
   constructor(props) {
    super(props);
    this.state = {
        data: [],
        library: null,
        FilterVal: "",

    }
}
componentDidMount() {
        fetch('/json.bc', {
            method: 'POST',
        })
            .then(response => response.text())
            .then(text => {
                const Maindata = JSON.parse(text.replace(/\'/g, '"'))
                 this.setState(state => ({
                    ...state,
                    data: Maindata
                }), () => {
                    this.reorganiseLibrary()
                })
            }).catch(error => console.error(error))
    })
}
reorganiseLibrary = () => {
    const { FilterVal} = this.state;
    let library = data;
    if (FilterVal !== "") {
        library = library.filter(item =>
             item.Val==FilterVal
        )
    }
    library = _.chunk(library);
    this.setState({
        library
    })

}

handlerFilter = evt =>
    this.setState(
        {
            FilterVal: evt.target.value
        },
        () => {
            this.reorganiseLibrary();
        }
    )
renderLibrary = () => {
const { library} = this.state;
    if (!library || (library && library.length === 0)) {
        return <div>nodata</div>
    }
return library.map((item, i) => (
        <div>
                  <span>{item.name}</span>
                  <span>{item.Val}</span>
       </div>
    ))
}

render() {
    const { library} = this.state;
    return (
        <div>
         {this.renderLibrary()}
         <input value={this.state.FilterVal} onChange={this.handlerFilter} />
      </div>
    )
}
}
ReactDOM.render(<App />, document.getElementById('Result')) 

Answer 1

Just adjust your filter:

const values = FilterVal.split(',').map(v => Number(v))
library = library.filter(item => values.includes(item.Val))

Answer 2

You can use FilterVal.includes(item.Val). This is working solution.

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      library: null,
      FilterVal: ""
    };
  }
  componentDidMount() {
    var originalArray = [
      {
        Info: "",
        Val: "3"
      },
      {
        Info: "",
        Val: "3"
      },
      {
        Info: "",
        Val: "2"
      },
      {
        Info: "",
        Val: "4"
      },
      {
        Info: "",
        Val: "4"
      },
      {
        Info: "",
        Val: "5"
      },
      {
        Info: "",
        Val: "2"
      },
      {
        Info: "",
        Val: "1"
      }
    ];
    this.setState({ data: originalArray });
  }
  reorganiseLibrary = () => {
    let FilterVal = this.state.FilterVal;
    let library = this.state.data;
    if (FilterVal !== "") {
      FilterVal = FilterVal.split("");
      library = library.filter(item => {
        if (FilterVal.includes(item.Val)) return item;
      });
    } else {
      library = null;
    }
    // library = _.chunk(library);
    this.setState({
      library
    });
  };

  handlerFilter = evt =>
    this.setState(
      {
        FilterVal: evt.target.value
      },
      () => {
        this.reorganiseLibrary();
      }
    );
  renderLibrary = () => {
    const { library } = this.state;
    if (!library || (library && library.length === 0)) {
      return <div>nodata</div>;
    }
    return library.map((item, i) => (
      <div>
        <span>{item.name}</span>
        <span>{item.Val}</span>
      </div>
    ));
  };

  render() {
    const { library } = this.state;
    return (
      <div>
        {this.renderLibrary()}
        <input value={this.state.FilterVal} onChange={this.handlerFilter} />
      </div>
    );
  }
}
ReactDOM.render(<App />, document.getElementById("Result"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id='Result' />