Answers
Here are the answers to the questions on what you have learned in this chapter:
- 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() { ... }
- The problem is that the
name
variable inside thediv
element isn’t enclosed in curly brackets. So, the wordname
will be output rather than the value of thename
prop. Here’s the corrected version of the component:export function Name({ name }) { return <div>{name}</div>; }
- The problem is that a
name
prop is passed rather thanfirstName
. Here’s the corrected JSX:<ContactDetails
firstName
="Fred" email="[email protected]" /> - The problem is that a
click
prop is passed rather thanonClick
. Here’s the corrected JSX:<button
onClick
={() => console.log("clicked")}> Click me </button>; - The initial value of the
loading
state istrue
. - 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> ); }
- The problem is that clicking the button will cause an error if
onAgree
isn’t passed because it will beundefined
. 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> ); }