intermediate-react-diagnostic.md

Using JavaScript, write a function that accepts two numbers and returns them multiplied together.

Using .map() and .forEach(), add the necessary JavaScript to print out each of the words with an ! appended to the end, such as:

One!
Two!
Three!
Four!
Five!

const words = [{
  content: "One",
},{
  content: "Two",
},{
  content: "Three",
},{
  content: "Four",
},{
  content: "Five"
}]

Write the code to create a component named HelloWorld. It should have the template <p>Hello, world!</p>!

Write the code to create a component named DisplayMessage. It should accept a prop called message and display it in <p></p> tags.

Write the code to import a React component named Avatar using ESM syntax. Export a React component named UserCard that has a single prop called user. Use the Avatar component as the template for the UserCard component, pass user.avatarUrl into a prop named url.

Write the code to export a React component named StopAndGo that takes a boolean prop called active. If active is true, the component should display <span>Go!</span>, otherwise it should display <span>Stop!</span>.

Write the code to import a React component named ListItem using ESM syntax. Export a React component named UnorderedList that accepts an array called items as a prop. In the template, iterate through the items array and create a new instance of ListItem for each item, passing the item into the content prop for ListItem.

Write the code to export a React component called LoginForm. It should have 2 labeled inputs for username and password, both of which should be logged to the console when the form is submitted.

Using the API endpoint https://pokeapi.co/api/v2/pokemon/pikachu, write the code to create a component that fetches a Pikachu object and displays a sprite (eg. pikachu.sprites.front_default) in an <img />.

Change this code to use context instead of props:

function Outer(){
  return <Inner prop="prop" />
}

function Inner({prop}){
  return <p>{prop}</p>
}

What is a hook?