React Component Communication Examples

Implement Parent-to-Child Communication

Create a parent component that passes a greeting message to a child component using props.

Expected output: Child component displays the greeting message passed from the parent.

Hint: Use JSX attributes to pass props and access them in the child component.

Implement Child-to-Parent Communication

Create a child component that calls a callback function passed from the parent when a button is clicked.

Expected output: Parent component responds to the child's button click, e.g., by showing an alert.

Hint: Pass a function as a prop from the parent and invoke it in the child's event handler.

Use React Context for Theme

Create a ThemeContext and use it to provide a theme value to a nested button component.

Expected output: Button component styles itself based on the theme value from context.

Hint: Use React.createContext, Context.Provider, and useContext hook.

React components communicate via props for parent-to-child data flow, callbacks for child-to-parent communication, lifting state up for shared state among siblings, and Context API for global data sharing.

Lifting state up means moving shared state to the closest common ancestor of components that need it, allowing them to access and update the state via props.

Use React Context API when you need to share data globally across many components without passing props through multiple levels, such as themes or user authentication.