検索バーに頭文字を入れたら、入れた頭文字の街が、数字を入れればその番号から始まる郵便番号を持ったお店が表示されるというものです。
どちらも現れた結果から検索をかけられるものを作りたいのですが、検索バーはできたもののそれ以降が詰まってしまっています。
現在のSearchBarのコードは以下の通りです。
import React, { useState } from "react";
const Search = props => {
const [searchInput, setSearchInput] = useState("");
const handleSearchInput = event => {
setSearchInput(event.target.value);
console.log(searchInput);
};
const handleSubmit = event => {
event.preventDefault();
props.search(searchInput);
};
return (
<div className="search">
<div className="page-header">
</div>
<div className="row search-wrapper">
<div className="col">
<form className="form-group search-box" onSubmit={handleSubmit}>
<div className="search-row">
<input
type="text"
id="customerName"
className="form-control"
placeholder="Busca por ciudad o codigo postal"
onChange={handleSearchInput}
/>
</div>
</form>
</div>
</div>
</div>
);
};
export default Search;
こちらのコードは予め用意されていたものです。
if文を使用して行えばいけるとは思うのですが、どのように書いていけばよいか正直わかりません。
お力添えいただければと思います、よろしくお願いいたします。
こちらは参考用に撮った写真です。数字を入れればその数字から始まるもの(今質問でいう郵便番号になるところです)
頭文字を入れたらその文字から始まるもの(今質問でいう街になるところです)