현재 버전


import React, { useState } from 'react';
import axios from 'axios';

const URL = 'http://localhost:8080/api/home';

function Search() {
  const [datas, setDatas] = useState([]);
  const [query, setQuery] = useState('');

  const handleChange = e => setQuery(e.target.value);

  const handleClick = () => {
    if (!query) return;
    axios
      .get(`${URL}/${query}`)
      .then(res => setDatas(res.data))
      .catch(err => console.log(err));
  };

  return (
    <div>
      <input type="text" value={query} onChange={handleChange} />
      <button onClick={handleClick}>click</button>
      {datas.map(data => (
        <div key={data.Country_name}>{data.Country_name}</div>
      ))}
    </div>
  );
}

export default Search;

이렇게 해보세요



수정 이력

2020-05-11 22:36:05 에 아래 내용에서 변경 됨 #1


import React, { useState } from 'react';
import axios from 'axios';

const URL = 'http://localhost:8080/api/home';

function Search() {
  const [datas, setDatas] = useState([]);
  const [query, setQuery] = useState('');

  const handleChange = e => setQuery(e.target.value);

  const handleClick = () => {
    if (!query) return;
    axios
      .get(`${URL}/${query}`)
      .then(res => setDatas(res.data))
      .catch(err => console.log(err));
  };

  return (
    <div>
      <input type="text" value={query} onChange={handleChange} />
      <button onClick={handleClick}>click</button>
      {datas.map(data => (
        <div key={data}>{data}</div>
      ))}
    </div>
  );
}

export default Search;

이렇게 해보세요