Questions
Answer the following questions to reinforce what you have learned in this chapter:
- What is wrong with the following component definition?
export function important() { return <div>This is really important!</div>; }
- 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?
- 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?
- What is wrong with how the
click
event is handled in the following JSX:<button click={() => console.log("clicked")}> Click me </button>;
- What is the initial value of the
loading
state defined here?const [loading, setLoading] = useState(true);
- 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> ); }
- 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> ); }