Crypto Prices

Question 1

Property to add to table header?

Answer 1

scope=”col”

Question 2

What does scope=”col” do?

Answer 2

Added for accessibility used for header <th> elements to indicate that all cells below this column relate to it.

Question 3

What is the outline of the table?

Answer 3

<table>
<caption>Crypto Prices</caption>
<thead>
<tr>
<th>Coin</th>
<th>Price</th>
<th>Market Cap</th>
</tr>
</thead>

<tbody>
<tr>
<th>Bitcoin</th>
<td>$29,970.48</td>
<td>$57,108,740,782</td>
</tr>
</tbody>
</table>

Question 4

Explain different functionality with how errors are handled with and without try/catch

Answer 4

With a try/catch, the error will not cause the script to stop executing.

If no catch, the error will be logged to the console by default and script will stop executing.

Question 5

Do you need catch with a try?

Answer 5

No, but if you don’t have catch, you will need a finally block.

Question 6

What property do you need to pass jsx elements in a loop?

Answer 6

the “key” prop, with a unique value.

Question 7

What value should you use to disable the next and back buttons?

Answer 7

You should use hasPrev and hasNext from the api. If hasPrev is not available, the use page === 0. If hasNext is not available then use the page and limit to calculate if you are on the last page.

Question 8

What state is needed for CryptoPrices?

Answer 8

const [page, setPage] = useState(0);
const [cryptoData, setCryptoData] = useState({});

Question 9

What does the useEffect look like?

Answer 9

useEffect(() => {
const fetchCrypto = async () => {
try {
const res = await fetch(${api}?page=${page});
const json = await res.json();

  setCryptoData(json);
catch (e) {
 // Display error to the user
  console.log('Error', e);
}   }

fetchCrypto();
}, [page]);