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![](https://ecs-static.teamtreehouse.com/assets/views/marketing/shared/community-banner-white-47072046c51352fe6a69f5e691ff5700b28bb11d45197d7bdf066d9ea3f72d0c.webp)
![gevuong](https://secure.gravatar.com/avatar/444f18431b9b5a00a23f7672ec347c0a?s=96&d=https%3A%2F%2Fecs-static.teamtreehouse.com%2Fassets%2Fcontent%2Fdefault_avatar-445fbbabfc8dc9188fb5967fe43322ee0c3e0dd1e10f378bf8343784af5a13eb.webp&r=pg)
gevuong
2,377 PointsMethods 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](https://secure.gravatar.com/avatar/b5bdc43c1e576145fb404edba6fea5a6?s=96&d=https%3A%2F%2Fecs-static.teamtreehouse.com%2Fassets%2Fcontent%2Fdefault_avatar-445fbbabfc8dc9188fb5967fe43322ee0c3e0dd1e10f378bf8343784af5a13eb.webp&r=pg)
Seth Kroger
56,413 PointsAnswer 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
2,377 Pointsgevuong
2,377 PointsOk. 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.
Are you saying that I may also need to create a babelrc file with an object containing presets: ["es2015", "react"]?
Seth Kroger
56,413 PointsSeth Kroger
56,413 PointsOK, 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: