Reactjs Quiz: Events & State

#1. How should you NOT listen to events when working with React?

Adding an event listener (e.g. via "addEventListener") manually.

Setting an event handler function via props (e.g. onClick={...})

You can't listen to events, React is about outputting data only.

#2. Which value should you pass to event listener props like onClick?

The code that should execute when that event occurs.

The result of calling a function that should execute when the event occurs.

A pointer at the function that should execute when the event occurs.

#3. How can you communicate from one of your components to a parent (i.e. higher level) component?

You can accept a function via props and call it from inside the lower-level (child) component to then trigger some action in the parent component (which passed the function).

You can accept an event via props and trigger it from inside the lower-level (child) component to then trigger some action in the parent component (which passed the function).

You can't communicate up, only down - i.e. you can only pass props down to pass data down to a component. You can't trigger an action in a higher-level component.

#4. How can you change what a component displays on the screen?

Use a regular JavaScript variable, change the value and output the variable's value in JSX.

You can't change the output - components are static in React apps.

Create some "state" value (via useState) which you can then change and output in JSX.

#5. Why do you need this extra "state" concept instead of regular JS variables which you change and use?

Because it's less code

Because standard JS variables don't cause React components to be re-evaluated

Because standard JS variables are not supported in React components

#6. Which statement about "useState" is NOT correct?

It receives an (optional) initial state value as an argument

Calling useState again will update the state value

It returns an array with exactly two elements

#7. How can you update component state (created via useState)?

You can assign a new value to the state variable.

You can call the state updating function which useState also returned.

You can call useState again.

#8. How much state may you manage in one single component?

You can have as many state slices as you need / want.

You should at most have one state (merge multiple states into a state object).

You can have multiple state slices if at least one of them is an object.

#9. What's wrong about this code snippet? const [counter, setCounter] = useState(1); ... setCounter(counter + 1);

There's nothing wrong about it.

State can't be a number.

If you update state that depends on the previous state, you should use the "function form" of the state updating function instead.

#10. What does this code snippet do? someArray.map((element) =>
{element}
)

It's a special React syntax that tells React to loop through a list of elements and output some JSX code.

It transforms an array (someArray) into a new array full of JSX elements (which can be output by React)

It tells React to output this paragraph conditionally.

#11. Why should you add the special "key" prop to list JSX elements?

It's required for React to be able to loop through the elements

It's required for the map() method to work correctly.

It's required for React to correctly identify and update (if needed) the list elements.

#12. What's true about outputting conditional content in React components?

You need a special conditional content syntax in your JSX code.

You need to create multiple, alternative components from which React then chooses.

You can work with regular ternary expressions of if checks to output or return different results in / from your component.

M	T	W	T	F	S	S
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30	31

Reactjs Quiz: Events & State

Results

#1. How should you NOT listen to events when working with React?

#2. Which value should you pass to event listener props like onClick?

#3. How can you communicate from one of your components to a parent (i.e. higher level) component?

#4. How can you change what a component displays on the screen?

#5. Why do you need this extra "state" concept instead of regular JS variables which you change and use?

#6. Which statement about "useState" is NOT correct?

#7. How can you update component state (created via useState)?

#8. How much state may you manage in one single component?

#9. What's wrong about this code snippet? const [counter, setCounter] = useState(1); ... setCounter(counter + 1);

#10. What does this code snippet do? someArray.map((element) =>
{element}
)

#11. Why should you add the special "key" prop to list JSX elements?

#12. What's true about outputting conditional content in React components?

Leave a Reply Cancel reply

Pages

Calendar

Archives

Recent Posts

Results

#1. How should you NOT listen to events when working with React?

#2. Which value should you pass to event listener props like onClick?

#3. How can you communicate from one of your components to a parent (i.e. higher level) component?

#4. How can you change what a component displays on the screen?

#5. Why do you need this extra "state" concept instead of regular JS variables which you change and use?

#6. Which statement about "useState" is NOT correct?

#7. How can you update component state (created via useState)?

#8. How much state may you manage in one single component?

#9. What's wrong about this code snippet? const [counter, setCounter] = useState(1); ... setCounter(counter + 1);

#10. What does this code snippet do? someArray.map((element) => {element})

#11. Why should you add the special "key" prop to list JSX elements?

#12. What's true about outputting conditional content in React components?

Related Articles

Leave a Reply Cancel reply

Pages

Calendar

Archives

Tags

Recent Posts

#10. What does this code snippet do? someArray.map((element) =>
{element}
)