Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript Building a Search Feature

Posted by gevuong
gevuong
2,377 Points

Methods defined in SearchForm does not use .bind() using es6 syntax?

Hi,

A little confused about the syntax used in writing methods within class SearchForm. Guil does not need to use .bind() when writing onSearchChange() and handleSubmit() in class SearchForm. Why? My first thought was because of the syntax he used to write his functions, as shown below. 

 onSearchChange = e => {
   this.setState({ searchText: e.target.value });
 }

I tried writing onSearchChange the way the tutorial was written, and webpack stated, "Module build failed: syntax error: Unexpected token". I am more familiar with the following syntax when writing methods in addition to binding "this" to onSearchChange() in the constructor. 

 onSearchChange(e) {
   this.setState({ searchText: e.target.value });
 };

Now that worked, as I would expect. But the way the tutorial did it, did not work for me... Anyone know what's going on? Thanks for reading.

1 Answer

Seth Kroger
Seth Kroger
56,413 Points
Seth Kroger
Seth Kroger
56,413 Points

Answer here: https://teamtreehouse.com/community/why-are-some-of-them-funcname-and-some-of-them-funcname

Also check that you have a .bablerc file in the project directory. Its absence can cause issues with using newer syntax.

gevuong
gevuong
2,377 Points

Ok. In the link you provided, you mention "using ES6+ feature property initializers" allows us to set the functions to arrow functions and does not require you to manually .bind() these functions to "this", reducing boilerplate.

How do I get access to the ES6+ feature property initializers? I already have the following npm packages installed but webpack is unable to bundle.

"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",

Are you saying that I may also need to create a babelrc file with an object containing presets: ["es2015", "react"]?

Seth Kroger
Seth Kroger
56,413 Points
Seth Kroger
Seth Kroger
56,413 Points

OK, I took a look at the workshop's downloads and it's using Create React App, so the configuration should have been sorted out for you. Are you manually configuring packages/webpack instead? If you're going that route I'd suggest installing babel-preset-stage-0 and a .bablerc file of:

{
  "presets": ["react", "es2015", "stage-0"]
}