Good day, only recently began to teach React, so please do not judge me harshly. I'm trying to write a search component, but all the time I get an error. I can not understand why and what I am doing wrong. All code here is https://github.com/VadoSevich/React-MyPractice-/blob/master/React%234/note.js . But this is actually the place where it finds an error (the string with handleSearch). Thank you in advance.

var Search = React.createClass({ render: function() { handleSearch: function(event) { var searchQuery = event.target.value.toLowerCase(); var displayedContacts = notes.filter(function(el) { var searchValue = el.name.toLowerCase(); return searchValue.indexOf(searchQuery) !== -1; }); }, return ( <input type="text" className="search" onChange={this.handleSearch}/> ); } });

    1 answer 1

    You need to start by learning javascript and not learning the framework.

    In short , the minimal fixes to your code are:

     var Search = React.createClass({ render: function() { return ( <input type="text" className="search" onChange={this.handleSearch}/> ); }, handleSearch: function(event) { var searchQuery = event.target.value.toLowerCase(); var displayedContacts = notes.filter(function(el) { var searchValue = el.name.toLowerCase(); return searchValue.indexOf(searchQuery) !== -1; }); } });

    An unexpected token error is not a React error. This is a mistake made by the language translator, which generally says, "You wrote me a complete nonsense from the point of view of the language. You are most likely sealed up or do not understand what you are doing."

    Expected:
    You must call the React.createClass function; Pass the object {}; Which properties should be all sorts of different methods, including the render method.

     { render: function(){}, myAwesomeMethod: function(){} }

    You do: Pass the property renderer method:

     { render: function(){ handleSearch: function(){} } }

    Inside the render method, declare a handleSearch label followed by the function keyword. The translator expects the function name further, does not see it, and throws an error. Everything is logical.

    And the right guys use the complete set of es-6 sugars with the reactor: constants, classes, switch functions, that's all. But you would understand the basics of the language first.

    • Thank you very much, everything is as elementary as ever. He wrote at 2 am, and therefore made such a mistake. The study is in progress, most of the code was taken off course, and the fact that he posted homework. According to Js, I read and studied a lot, decided to start practicing and writing React accordingly. By trial and error, I think it should work. But as above and wrote, a beginner. - Vadym Checherinda
    • @VadymChecherinda I somehow studied js without tutorials, gaining. And then I realized that the textbooks would be much faster. It is necessary to alternate practice with learning the basics. On one practice you will go far, as well as on some textbooks. - Duck Learns to Take Cover
    • I will consider this, thanks for the advice. - Vadym Checherinda