Arrow function not working in react class component

Question

I have the following code below which displays records from an array and is working fine. now I want to add ability to search data

and I have added the following script to enable the search

filterRecord = record =>
    record.name.toUpperCase().indexOf(this.state.searchdata.toUpperCase()) >
      -1 ||
    record.Age.indexOf(this.state.searchdata) > -1 ||
    record.gender.toUpperCase().indexOf(this.state.searchdata.toUpperCase()) >
      -1;

I have also tried

filterRecord = (record) => (record.name.indexOf(this.state.searchdata) > -1 || 
                           record.Age.indexOf(this.state.searchdata) > -1 || 
                           record.gender.indexOf(this.state.searchdata) > -1);

both code give error unexpected token pointing at equal to (=) at this line filterRecord =

here is the screenshot

Here is the full code

class Application extends React.Component {
  constructor(props) {
    super(props);
    this.filterRecord = this.filterRecord.bind(this);
    this.handleChange = this.handleChange.bind(this);
    this.state = {
      rec: [
        { name: "Tony", Age: "18", gender: "male" },
        { name: "John", Age: "21", gender: "female" },
        { name: "Luke", Age: "78", gender: "male" },
        { name: "Mark", Age: "90", gender: "female" },
        { name: "Jame", Age: "87", gender: "female" },
        { name: "Franco", Age: "34", gender: "male" },
        { name: "Franco", Age: "34", gender: "male" },
        { name: "Biggard", Age: "19", gender: "male" },
        { name: "tom", Age: "89", gender: "female" }
      ],
      value: "",
      searchdata: ""
    };
  }

  handleChange(event) {
    this.setState({ [event.target.name]: event.target.value });
  }
  filterRecord = record =>
    record.name.toUpperCase().indexOf(this.state.searchdata.toUpperCase()) >
      -1 ||
    record.Age.indexOf(this.state.searchdata) > -1 ||
    record.gender.toUpperCase().indexOf(this.state.searchdata.toUpperCase()) >
      -1;

  render() {
    return (
      <div>
        <div>
          <h3>Search/Filter Records by name, Age and gender</h3>

          <input
            type="text"
            placeholder="Search by name, Age and gender"
            id="searchdata"
            name="searchdata"
            type="text"
            value={this.state.searchdata}
            onChange={this.handleChange}
          />
          <ul>
            {this.state.rec.filter(this.filterRecord).map((obj, i) => (
              <li key={i}>
                {obj.name} - {obj.Age} - {obj.gender}
              </li>
            ))}
          </ul>
        </div>
      </div>
    );
  }
}

Answer 1

它在我的屏幕上工作正常

Answer 2

It works well.

I think you didn't install babel and es6/es2015.

 class App extends React.Component { constructor(props) { super(props); this.filterRecord = this.filterRecord.bind(this); this.handleChange = this.handleChange.bind(this); this.state = { rec: [ { name: "Tony", Age: "18", gender: "male" }, { name: "John", Age: "21", gender: "female" }, { name: "Luke", Age: "78", gender: "male" }, { name: "Mark", Age: "90", gender: "female" }, { name: "Jame", Age: "87", gender: "female" }, { name: "Franco", Age: "34", gender: "male" }, { name: "Franco", Age: "34", gender: "male" }, { name: "Biggard", Age: "19", gender: "male" }, { name: "tom", Age: "89", gender: "female" } ], value: "", searchdata: "" }; } handleChange(event) { this.setState({ [event.target.name]: event.target.value }); } filterRecord = record => (record.name.toUpperCase().indexOf(this.state.searchdata.toUpperCase()) > -1 || record.Age.indexOf(this.state.searchdata) > -1 || record.gender.toUpperCase().indexOf(this.state.searchdata.toUpperCase()) > -1); render() { return ( <div> <div> <h3>Search/Filter Records by name, Age and gender</h3> <input type="text" placeholder="Search by name, Age and gender" id="searchdata" name="searchdata" type="text" value={this.state.searchdata} onChange={this.handleChange} /> <ul> {this.state.rec.filter(this.filterRecord).map((obj, i) => ( <li key={i}> {obj.name} - {obj.Age} - {obj.gender} </li> ))} </ul> </div> </div> ); } } ReactDOM.render( < App / >, document.getElementById('root'));

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

Answer 3

I might be silly here but i think your syntax for arrow function is wrong. You didnt wrap your function body in curly braces. Try this:

filterRecord = (record) => {
   return (record.name.toUpperCase().indexOf(this.state.searchdata.toUpperCase()) > -1 ||
           record.Age.indexOf(this.state.searchdata) > -1 ||
           record.gender.toUpperCase().indexOf(this.state.searchdata.toUpperCase()) > -1);
}

Hope this helps!!