State vs props comparison in React - Interactive Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to declare a state variable using React hooks.

React

const [count, setCount] = [1](0);

Drag options to blanks, or click blank then click option'

AuseContext

BuseEffect

CuseState

DuseRef

Attempts:

3 left

💡 Hint

Common Mistakes

Using useEffect instead of useState to declare state.

Trying to declare state without a hook.

The useState hook is used to declare state variables in React functional components.

2fill in blank

medium

Complete the code to pass a prop named 'title' with value 'Hello' to a component.

React

<MyComponent [1]="Hello" />

Drag options to blanks, or click blank then click option'

Astate

Bvalue

CsetTitle

Dtitle

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'state' or 'setTitle' as prop names incorrectly.

Confusing props with state variables.

Props are passed as attributes to components. Here, title is the prop name.

3fill in blank

hard

Fix the error in accessing a prop inside a functional component.

React

function Greeting([1]) {
  return <h1>{props.name}</h1>;
}

Drag options to blanks, or click blank then click option'

Aprops

Bstate

Cname

DsetName

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'state' instead of 'props' as the function parameter.

Trying to access props without declaring them.

The component must receive props as a parameter to access its properties.

4fill in blank

hard

Fill both blanks to create a state variable and update it on button click.

React

const [[1], [2]] = useState(0);

Drag options to blanks, or click blank then click option'

Acount

BsetCount

Cvalue

DsetValue

Attempts:

3 left

💡 Hint

Common Mistakes

Swapping the state variable and updater names.

Using unrelated names that don't follow the convention.

The first element is the state variable name, and the second is the function to update it.

5fill in blank

hard

Fill all three blanks to create a component that receives a prop and uses state to toggle a message.

React

function Message([1]) {
  const [[2], [3]] = useState(true);
  return (
    <div>
      <h1>{show ? text : ''}</h1>
      <button onClick={() => setShow(!show)}>Toggle</button>
    </div>
  );
}

Drag options to blanks, or click blank then click option'

Atext

Bshow

CsetShow

Dtoggle

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong names for props or state variables.

Not matching the updater function name with the state variable.

The component receives a prop named 'text'. The state variable 'show' controls visibility, updated by 'setShow'.