こんにちは！
今日はNIFTY Tech Day 2023の開催日です！オンラインでセッションを視聴することもできるので、ご登録がまだの方は奮ってご参加ください！
さて、NIFTY Tech Day 2023では、オフライン会場にてReactを使ったコードレビュー問題を提示しています。しかし折角の問題なのでオフラインだけでは勿体無い……！
ということで、今回はオンライン参加の方々にもぜひ挑戦していただきたいです！
回答については、後日エンジニアブログにて掲載予定です。
出題
次のような検索サジェストを表示するコンポーネントをReactで作成しました。
ぱっと見だと動いているし問題なさそう！……本当に？
React有識者、レビュー求む！
おかしな箇所を見つけたら #nifty_tech_day #コードレビュー問題 のハッシュタグをつけてXに投稿して教えてください！
src/components/AutoComplete/AutoComplete.tsx
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
/* eslint-disable */ import React, { useEffect, useState } from 'react'; import { AutoCompleteList } from '../common/AutoCompleteList'; import { AutoCompleteContainer } from '../common/AutoCompleteContainer'; import { AutoCompleteItem } from '../common/AutoCompleteItem'; import StatefulTextBox from './StatefulTextBox'; const api = '/api/autoSuggest'; export const AutoComplete = () => { const [value, setValue] = useState(''); const [suggestion, setSuggestion] = useState<string[]>([]); useEffect(() => { const fetchFn = async () => { const response = await fetch(`${api}?q=${value}`); const responseJson = await response.json(); setSuggestion(responseJson.items); }; fetchFn(); }); const AutoCompleteWindow = () => { let listElements: JSX.Element[] = []; for (let suggestionItem of suggestion) { listElements.push( <AutoCompleteItem value={suggestionItem} onClick={setValue} /> ); } return <AutoCompleteList>{listElements}</AutoCompleteList>; }; return ( <AutoCompleteContainer> <StatefulTextBox onValueChange={(value) => setValue(value)} /> <AutoCompleteWindow /> </AutoCompleteContainer> ); }; |
src/components/AutoComplete/StatefulTextBox.tsx
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
/* eslint-disable */ import { useEffect, useState } from 'react'; import { TextBox } from '../common/TextBox'; type Props = { onValueChange: (value: string) => void; }; export default function ({ onValueChange }: Props): JSX.Element { const [value, setValue] = useState(''); useEffect(() => { onValueChange(value); }, [value, onValueChange]); return <TextBox value={value} onChange={setValue} />; } |
