> For the complete documentation index, see [llms.txt](https://super-yusuke.gitbook.io/udemy-course/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://super-yusuke.gitbook.io/udemy-course/react-redux-redux-woita-giphy-app/search-konpnentono.md).

# Search コンポーネントの作成

<https://codesandbox.io/s/zn9ymy41x3>

## /components/search.js

```javascript
 import React from "react";

class Search extends React.Component {
  constructor(props) {
    super(props);
    this.state = { title: "" };
  }

  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <input value={this.state.title} onChange={this.handleChange} />
          <input type="submit" value="Find Your GIFs" />
        </form>
      </div>
    );
  }

  handleChange = event => {
    const title = event.target.value;
    this.setState({ title: title });
  };

  handleSubmit = event => {
    event.preventDefault();
    //this.props.addTodo(this.state.title);
    this.setState({ title: "" });
  };
}

export default Search;
```

## app.js

作ったコンポーネントを使用する

```javascript
import React from "react";

import ImageList from "./containers/ImageList";

// Search Component を追加する
import Search from "./components/Search";

const App = () => {
  return (
    <div>
      App
      <Search />
      <ImageList />
    </div>
  );
};

export default App;
```