Answers

Here are the answers to the questions on what you have learned in this chapter:

1. The problem with the component definition is that its name is lowercase. React functions must be named with an uppercase first character:

   export function Important() {
     ...
   }

2. The problem is that the name variable inside the div element isn’t enclosed in curly brackets. So, the word name will be output rather than the value of the name prop. Here’s the corrected version of the component:

   export function Name({ name }) {
     return <div>{name}</div>;
   }

3. The problem is that a name prop is passed rather than firstName. Here’s the corrected JSX:

   <ContactDetails firstName="Fred" email="[e-mail]" />

4. The problem is that a click prop is passed rather than onClick. Here’s the corrected JSX:

   <button onClick={() => console.log("clicked")}>
     Click me
   </button>;

5. The initial value of the loading state is true.
6. The state isn’t updated using the state setter function. Here’s the corrected version of the state being set:

   export function Agree() {
     const [agree, setAgree] = useState();
     return (
       <button onClick={() => setAgree(true)}>
         Click to agree
       </button>
     );
   }

7. The problem is that clicking the button will cause an error if onAgree isn’t passed because it will be undefined. Here’s the corrected version of the component:

   export function Agree({ onAgree }) {
     function handleClick() {
       if (onAgree) {
         onAgree();
       }
     }
     return (
       <button onClick={handleClick}>
         Click to agree
       </button>
     );
   }