React Basics — Series 3

Preview — 3 of 10 questions

What is the actual relationship between Avatar (the function) and element (the JSX result of writing <Avatar src="/me.png" />)?

javascript

function Avatar({ src }) {
  return <img src={src} className="avatar" />;
}

const element = <Avatar src="/me.png" />;

Aelement is a compiled CSS rule generated from Avatar

BAvatar is a function that describes how to build UI; element is a lightweight plain object (created by React.createElement) describing what to render — React only calls Avatar() later, during rendering, to produce actual output

Celement is the real DOM node for the <img> tag, created immediately when this line runs

DThey are the same thing — Avatar and element can be used interchangeably anywhere in code

Starting at likes = 5, the button is clicked once. What does the button display right after that click?

javascript

function LikeButton() {
  const [likes, setLikes] = useState(5);
  return (
    <button onClick={() => setLikes(likes + 1)}>
      ❤ {likes}
    </button>
  );
}

A❤ 5 — likes never changes because setLikes schedules the update for later, and the old value is what stays on screen

B❤ 0 — clicking resets the counter to its default

C❤ 6 — setLikes triggers a re-render with the updated value, and the component displays the new state

DAn error — likes cannot be reassigned since it's declared with const

This form was copy-pasted from plain HTML. Which of these attributes actually work as intended once compiled by JSX?

javascript

function ContactForm() {
  return (
    <form>
      <label for="email">Email</label>
      <input id="email" onclick={() => {}} class="input" tabindex="0" />
    </form>
  );
}

Afor, onclick, class, and tabindex are all unrecognized DOM/React prop names in JSX — the correct camelCase forms are htmlFor, onClick, className, and tabIndex; using the HTML versions here means none of the intended behavior/styling is actually applied

BAll four attributes work exactly as written — JSX is just HTML with curly braces added

COnly class needs to change to className — the other three are valid as-is in JSX

DNone of them work — JSX requires every attribute name to be entirely different from its HTML counterpart

Answer all 10 questions (7 more), see explanations for every answer, and track your score.