React Basics

Preview — 3 of 10 questions

What is valid inside JSX curly braces {}?

javascript

function App() {
  const name = "Alice";
  const isAdmin = true;

  return (
    <div>
      <p>{name}</p>
      <p>{isAdmin ? "Admin" : "User"}</p>
      <p>{42 * 2}</p>
      <p>{console.log("hello")}</p>  {/* valid expression, renders nothing */}
    </div>
  );
}

AOnly strings and numbers — no expressions allowed

BAny JavaScript expression — strings, numbers, ternaries, function calls, arrays — but not statements (if, for, switch)

COnly variables — no inline calculations

DStatements like if and for are fine as long as they're wrapped in the braces

What happens here?

javascript

function Greeting({ name, age }) {
  return <p>Hello {name}, you are {age} years old</p>;
}

function App() {
  return <Greeting name="Alice" age={30} />;
}

AError — age must be passed as a string: age="30"

BWorks — but age will be the string "30" not the number 30

CWorks — string props use quotes, number props use curly braces {}

DError — props must be typed with PropTypes to be used

What is the initial value of count?

javascript

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>+</button>
    </div>
  );
}

A0 — the argument passed to useState is the initial value

Bnull — React initializes state to null by default

Cundefined — state starts empty

D"0" — React converts initial values to strings

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