ReactHooksで映画検索アプリを作る

コード

https://github.com/kenta0313/react-hooked

コード解説

1.Header.js

components/Header.js

import React from "react";

const Header = (props) => {
  return (
    <header className="App-header">
      <h2>{props.text}</h2>
    </header>
  );
};

export default Header;

親要素からレンダリングしているだけです。

index.jsのファイルをインポートするのを忘れないでください。

```react:index.js import App from './components/App'; ```

2.Movie.js

```react:conponents/Movie.js import React from "react";

const DEFAULT_PLACEHOLDER_IMAGE =
"https://m.media-amazon.com/images/M/MV5BMTczNTI2ODUwOF5BMl5BanBnXkFtZTcwMTU0NTIzMw@@._V1_SX300.jpg";

const Movie = ({ movie }) => {
const poster =
movie.Poster === "N/A" ? DEFAULT_PLACEHOLDER_IMAGE : movie.Poster;
return (

{movie.Title}

<img
width="200"
alt={The movie titled: ${movie.Title}}
src={poster}
/>

({movie.Year})

);
};

export default Movie;

<p>こちらはAPIから取ってきた変数を引数に取っています。</p>
<h3>3.Search.js</h3>
```react:conponents/Search.js
import React, { useState } from "react";


const Search = (props) => {
  const [searchValue, setSearchValue] = useState("");
  
  const handleSearchInputChanges = (e) => {
    setSearchValue(e.target.value);
  }

  const resetInputField = () => {
    setSearchValue("")
  }

  const callSearchFunction = (e) => {
    e.preventDefault();
    props.search(searchValue);
    resetInputField();
  }

  return (
      <form className="search">
        <input
          value={searchValue}
          onChange={handleSearchInputChanges}
          type="text"
        />
        <input onClick={callSearchFunction} type="submit" value="SEARCH" />
      </form>
    );
}

export default Search;

まず、useStateで検索欄の初期値を空に設定してます。

handleSearchInputChangesで検索欄へ入力できるようにしています。（これがなかったら入力できないです。）

resetInputFieldが呼ばれると検索欄が空になりなす。