Beginnerprogrammer Beginnerprogrammer - 1 year ago 77
React JSX Question

ReactJs trying to create a filter list

I am trying to create an filter list which filter the list on typed input. But don't know why the if statement is not working.

Here is the function I wrote: `

filterList (event) {
var updatedList = this.props.array;
var filterText = this.state.text;
updatedList = updatedList.filter(function(item){
if( === filterText){

Can someone help me out on this here is a link to my codepen: LINK

Answer Source

Your filter needs to update the array in the component state to force a re-render. You don't update props to force a re-render, props are more for initial data, or consistent data, which can be updated from the top level.

Change the handle function to pass the text to the filterList function, and return the result

handleChange(event) {
  var array = this.filterList(;
  this.setState({ text:, array: array });

filterList (filterText) {
  var updatedList = this.props.array;
  return updatedList.filter(function(item){
    return === filterText;

Update getInitialState to use the props:

getInitialState() {
  return { text:'', array: this.props.array};

Then use the state instead of props in your render:

var arrayComponents = {
     return <li className="photo photo-name">{} <img className="photo" src={}/></li>;
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download