chap07 HookDeferredTransition.js

0% Statements 0/11

100% Branches 0/0

0% Functions 0/4

0% Lines 0/10

Press n or j to go to the next uncovered block, b, p or k for the previous block.


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  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  import { useDeferredValue, useState } from 'react';
import books from './books';
import commentList from './comments';
import { BookDetails, CommentList } from './HookTransitionChild';
 
export default function HookDeferredTransition() {
  const [isbn, setIsbn] = useState('');
  const [comments, setComments] = useState([]);
  const deferredComments = useDeferredValue(comments);
  const isPending = comments !== deferredComments;
 
  const handleChange = e => {
    const isbn = e.target.value;
    setIsbn(isbn);
    setComments(commentList.filter(c => c.isbn === isbn));
  };
 
  return (
      <>
      <select onChange={handleChange}>
        <option value="">선택해주세요.</option>
        {books.map(b => (
           <option key={b.isbn} value={b.isbn}>{b.title}</option>
        ))}
      </select>
      <BookDetails isbn={isbn} />
      <hr />
      <CommentList src={deferredComments} isPending={isPending} />
      </>
  );
}