Questions

Answer the following questions to reinforce what you have learned in this chapter:

1. What is wrong with the following component definition?

   export function important() {

     return <div>This is really important!</div>;

   }

2. A component with a prop is defined as follows:

   export function Name({ name }) {

     return <div>name</div>;

   }

The value of the prop isn’t output though. What is the problem?

3. Component props are passed into a component as follows:

   <ContactDetails name="Fred" email="[email protected]" />

The component is then defined as follows:

export function ContactDetails({ firstName, email }) {
  return (
    <div>
      <div>{firstName}</div>
      <div>{email}</div>
    </div>
  );
}

The name Fred isn’t output though. What is the problem?

4. What is wrong with how the click event is handled in the following JSX:

   <button click={() => console.log("clicked")}>

     Click me

   </button>;

5. What is the initial value of the loading state defined here?

   const [loading, setLoading] = useState(true);

6. What is wrong with how the state is set in the following component?

   export function Agree() {

     const [agree, setAgree] = useState();

     return (

       <button onClick={() => agree = true}>

         Click to agree

       </button>

     );

   }

7. The following component implements an optional Agree event. What is wrong with this implementation?

   export function Agree({ onAgree }) {

     function handleClick() {

       onAgree();

     }

     return (

       <button onClick={handleClick}>

         Click to agree

       </button>

     );

   }