React Challenges

Question 1

I have a list that i map on, on click I want to add new input item into that list…

Answer 1

state updating with the spread operator.

setItems([…items, input]);
setInput(“”);

Question 2

spot the wrong things

1. index{cryptocurrencyList.map((index, element) => {
   <>
   <td>{element.name}</td>
   <td>{element.rate}</td>
   <td>{numberCoin}</td>
   </>
   })}

Answer 2

In the map() function, the parameters are reversed. The correct order is:

array.map((element, index) => { … });

element refers to the current item in the array.
index is the position of the item.

Question 3

spot the wrong things

2. return issue{cryptocurrencyList.map((index, element) => {
   <>
   <td>{element.name}</td>
   <td>{element.rate}</td>
   <td>{numberCoin}</td>
   </>
   })}

Answer 3

Fragment Syntax Inside map()
You are trying to wrap multiple <td> elements using a React Fragment (<>…</>), which is correct. However, you forgot to return the Fragment from the map() function.

Corrected map syntax:
To fix this, add a return or use the implicit return syntax by removing {} in the arrow function.

Question 4

spot the wrong things

3. tr tag and key –> virtual dom hon!{cryptocurrencyList.map((index, element) => {
   <>
   <td>{element.name}</td>
   <td>{element.rate}</td>
   <td>{numberCoin}</td>
   </>
   })}

Answer 4

You cannot place multiple <tr> tags inside a single <tr> parent element. Instead, the map() function should create a separate <tr> for each item in cryptocurrencyList.

Question 5

explain the error with jsx here:

{cryptocurrencyList.map((element, index) => (
<tr key={index}>
<td>{element.name}</td>
<td>1 USD= {exchangeAmount ? {element.rate} {element.code} : “”} </td>
<td>{exchangeAmount ? element.rate*exchangeAmount : (0.0000000.toFixed(8))}</td>
</tr>
))}

Answer 5

{element.rate} and {element.code} are being wrapped with extra curly braces. You don’t need {} inside JSX when you’re already inside curly braces.

Question 6

how to put in jsx string+variable

Answer 6

1 USD = {exchangeAmount ? ${element.rate} ${element.code} : “”}

Question 7

Improper Return from Arrow Function:
1. explicit
2. implicit

give example

Answer 7

When using an arrow function with curly braces {}, you need to explicitly use the return keyword to return JSX. Alternatively, you can remove the braces to implicitly return JSX.

Option 1:

// With explicit return:
cryptocurrencyList.map((element, index) => {
return (
<React.Fragment key={index}>
<td>{element.name}</td>
<td>{element.rate}</td>
<td>{numberCoin}</td>
</React.Fragment>
);
});

// With implicit return:
cryptocurrencyList.map((element, index) => (
<React.Fragment key={index}>
<td>{element.name}</td>
<td>{element.rate}</td>
<td>{numberCoin}</td>
</React.Fragment>
));

Option 2:
// With implicit return:
cryptocurrencyList.map((element, index) => (
<React.Fragment key={index}>
<td>{element.name}</td>
<td>{element.rate}</td>
<td>{numberCoin}</td>
</React.Fragment>
));

Question 8

react: mapping, key and virtual dom

Answer 8

you always need to use a key when mapping over a list of elements because React relies on the key to efficiently update the Virtual DOM and reconcile changes to the real DOM.

Why is key Needed?
The key helps React uniquely identify each element in a list. When the Virtual DOM is updated, React uses the key to determine:

Which elements have changed.
Which elements were added or removed.