React Component Communication Quiz
Four quick checks on how React components pass data down via props and notify parents via callbacks, plus when render-props become a better tool than another layer of props.
208 views
1
Pass a label and an onClick callback into the IconButton below from a parent. Then call it from Toolbar with two different labels.
function IconButton({ label, onClick }) {
return (
<button type="button" onClick={onClick}>
{label}
</button>
);
}Name three reasons React tends to win over older imperative DOM frameworks. One sentence each.
Build a <Toggle> render-prop component that owns boolean state and lets its caller render any UI it wants. The caller should be able to render either a checkbox or a button using the same <Toggle>.
Two sibling components need to share the same query string. Without using Context or a global store, where should that state live, and why? Sketch the fix.
function SearchBox({ value, onChange }) {
return <input value={value} onChange={(e) => onChange(e.target.value)} />;
}
function ResultCount({ value }) {
return <span>{value.length} chars</span>;
}