React filtering Json array //TypeError: includes is not a function [duplicate]

Answer 1

It means, records array is not empty, but somehow id is not defined. For example:

records = [
  { score: 4.5 },
  ...
];

Or:

records = [4.5, 5.5, ...]

The solution is checking for validity of record.id first before checking that it contains this.state.id, like this:

this.state.records.filter(record =>
  this.state.id == '' || (record.id && record.id.includes(this.state.id))
);

UPDATE: If the above still doesn't work, it could be because you're testing it on IE. includes doesn't work in IE, so you might want to use indexOf.

Answer 2

First of all includes() is mainly used for arrays, and here you are calling this function on record.id which i guess is a string so you should be using record.id.contains(x)

Second, in js the identity (===) operator behaves identically to the equality (==) operator except no type conversion is done, and the types must be the same to be considered equal. So you should use the identity operator in your condition

Answer 3

You have used the record variable two times. First in the outer block of filter function and second in the inner block of map function. So the compiler will not be able to identify which record variable to use and will throw an error.

You have to use another variable for map function like used in the code below.

function ProjectItem(props) {
		console.log("props => ",props)
  	return (
  	<div>
  	  <h1>{props.project.id}</h1>
  	</div>
    )
 
}


class Test extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      id:'a' , 
      records: [
                  {id:"a"}, 
                  {id:"b"}, 
                  {id:"c"}, 
                  {id:"d"}, 
                  {id:"e"}, 
                  {id:"f"}, 
                  {id:"g"}, 
                  {id:"h"}, 
                  {id:"i"}
                ]
     };
  }
  
  render() {

    return (
      <div>
       {this.state.records.filter(record => this.state.id == '' || record.id.includes(this.state.id))
        .map(rec => ( <ProjectItem  key={rec.id} project={rec} />) )
        }
      </div>
    )
  }
}

ReactDOM.render(<Test />, document.querySelector("#app"))

<div id="app"></div>
<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>