Passing Data Between Parent and Child Components in React — PART 1

React is a popular JavaScript library for building user interfaces, and one of its core concepts is component-based development. React components are building blocks that can be reused across an application to create complex user interfaces. In this article, we will explore how to pass data from a parent component to a child component in React with multiple examples.

Passing data from parent to child components is a common use case in React, and there are several ways to accomplish this. Let’s take a look at some examples.

Example 1: Using props

One of the simplest ways to pass data from a parent component to a child component in React is by using props. Props are properties that are passed down from a parent component to a child component. Here’s an example:

// Parent component
function Parent() {
  const data = "Hello from parent";

return (
    <Child message={data} />
  );
}
// Child component
function Child(props) {
  return (
    <div>{props.message}</div>
  );
}

In this example, the Parent component passes a message prop down to the Child component. The Child component receives this prop as a parameter in its function signature and renders it inside a div element.

Example 2: Using state

Another way to pass data from a parent component to a child component is by using state. In React, state is an object that represents the internal state of a component. Here’s an example:

// Parent component
function Parent() {
  const [data, setData] = useState("Hello from parent");

return (
    <Child message={data} />
  );
}
// Child component
function Child(props) {
  return (
    <div>{props.message}</div>
  );
}

In this example, the Parent component uses the useState hook to create a data state variable with an initial value of "Hello from parent". It then passes this state variable down to the Child component as a prop.

Example 3: Using context

Context is a powerful feature in React that allows data to be passed down through a component tree without the need to pass props down manually at every level. Here’s an example:

// Create a context
const MyContext = React.createContext();

// Parent component
function Parent() {
  const data = "Hello from parent";
  return (
    <MyContext.Provider value={data}>
      <Child />
    </MyContext.Provider>
  );
}
// Child component
function Child() {
  const data = useContext(MyContext);
  return (
    <div>{data}</div>
  );
}

In this example, we create a MyContext object using the createContext function. The Parent component then wraps the Child component inside a MyContext.Provider component, passing the data variable as the value prop. The Child component uses the useContext hook to access the data variable from the context.

Conclusion

In this article, we’ve explored three different ways to pass data from a parent component to a child component in React: using props, using state, and using context. Each approach has its own strengths and weaknesses, and the choice of which to use will depend on the specific requirements of your application. By mastering these techniques, you’ll be able to build powerful and flexible React components that can be easily reused across your application.