Permalink
Browse files

Step 2: Create a search bar and pass term back to App

  • Loading branch information...
samanthamichele7 committed May 31, 2017
1 parent abd1f62 commit 7397d5e411f5822c894b6300454cd5085b5bec31
Showing with 30 additions and 2 deletions.
  1. +23 −0 src/components/SearchBar.js
  2. +7 −2 src/index.js
@@ -0,0 +1,23 @@
import React from 'react';

class SearchBar extends React.Component {
constructor() {
super();
this.state = { term: '' }
}

onInputChange(term) {
this.setState({term});
this.props.onTermChange(term);
}

render() {
return (
<div className="search">
<input onChange={event => this.onInputChange(event.target.value)} />
</div>
);
}
}

export default SearchBar;
@@ -1,11 +1,16 @@
import React from 'react';
import ReactDOM from 'react-dom';
import SearchBar from './components/SearchBar';

class App extends React.Component {
handleTermChange(term) {
console.log(term);
}

render() {
return (
<div className="greeting">
<p className="greeting-text">Hello World!</p>
<div>
<SearchBar onTermChange={this.handleTermChange} />
</div>
);
}

2 comments on commit 7397d5e

@infosmith

This comment has been minimized.

Copy link

infosmith replied Jul 10, 2017

I haven't completed the tutorial yet, so this may have already been answered: "is is safe to use props without explicitly passing props to components' constructor or super?" I'm following this tutorial in addition to Microsoft's Introduction to ReactJS course on EdX, and it advises to explicitly pass props to the constructor and super methods. Otherwise, using props can lead to unexpected results. I noticed in the example here props isn't being passed. Was that intentional? The attachment shows a constructor configured according to the EdX course. Anyways, thank you for the tutorial and in advance for your response.
props

@infosmith

This comment has been minimized.

Copy link

infosmith replied Jul 10, 2017

Nevermind, I see it later in the tutorial.

Please sign in to comment.