Passing information: create a method that allows the stateless child component to update the state of the parent component.

Passing information: create a method that allows the stateless child component to update the state of the parent component.

• A. Use a global event bus to emit changes
• B. Pass a callback function from the parent to the child so the child can request an update to the parent's state
• C. Mutate the parent's state directly from the child
• D. Use the child's own state to mirror the parent

Answer: (C)

In React, data typically flows from parent to child via props, but a child that doesn’t manage its own state can still influence the parent by calling a function provided by the parent. The essence is lifting the state up and letting the parent own the data, while giving the child a way to request updates through a callback. How this works in practice is simple: the parent keeps the state and defines a function that updates that state (using setState or the setter from useState). The parent passes that function down to the child as a prop. When the child needs to cause a change in the parent, it calls this function with the new value (or with a value-producing function). The parent then updates its state, which re-renders both components with the new data. This keeps a single source of truth and ensures React’s rendering stays predictable. Mutating the parent's state directly from the child is not how React is designed to work. Props are read-only, and state updates must go through the proper setter so React can track changes and re-render safely. Likewise, having the child mirror the parent’s state or using a global event bus adds complexity and can obscure where data is coming from, making the app harder to reason about. The clean, idiomatic approach is the callback pattern: the child requests updates by invoking a function supplied by the parent, and the parent applies the change to its own state.

In React, data typically flows from parent to child via props, but a child that doesn’t manage its own state can still influence the parent by calling a function provided by the parent. The essence is lifting the state up and letting the parent own the data, while giving the child a way to request updates through a callback.

How this works in practice is simple: the parent keeps the state and defines a function that updates that state (using setState or the setter from useState). The parent passes that function down to the child as a prop. When the child needs to cause a change in the parent, it calls this function with the new value (or with a value-producing function). The parent then updates its state, which re-renders both components with the new data. This keeps a single source of truth and ensures React’s rendering stays predictable.

Mutating the parent's state directly from the child is not how React is designed to work. Props are read-only, and state updates must go through the proper setter so React can track changes and re-render safely. Likewise, having the child mirror the parent’s state or using a global event bus adds complexity and can obscure where data is coming from, making the app harder to reason about. The clean, idiomatic approach is the callback pattern: the child requests updates by invoking a function supplied by the parent, and the parent applies the change to its own state.