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="[e-mail]" />

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>
     );
   }