Beginnerprogrammer Beginnerprogrammer - 5 months ago 28
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


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>;