React context API (Part 1) — Passing state to child components made easy

Tram Ho

Something like this in the ReactJS docs

In a sense, they encourage react users to use composition rather than inheritance to reuse code that turns them into components.

There are a few ways to create reuse components

  • Wrapper component
  • this.props.children
  • Children function
  • HOC (higher order component)
  • Context

Not around, now we learn about Context first: 3

1. What is context?

The React context API was built to make it easier to pass data to components .

There are quite a few tools that make this easy, crazy looks like Redux is very popular now – pretty much stars

So what is the context briefly? Context allows state data to be passed from parent component to child component through Provider . Each child component will have a Consumer will influence state changes from the parent component . Now, a func child component can affect the parent component ‘s state .

2. Why is context useful?

Context allows data to be shared as a global data within a component . This makes our code easier to read. A child component will directly affect the top component state regardless of where the child component is in that component .

3. Simple Tutorial

First let’s create a file Context.js . There will be 2 components available for us to use Provider and Consumer

import createContext from react first. Then create Provider and Consumer , Provide will provide state to Consumer , Each Consumer will influence Provider ‘s changes

Next, we have to create the parent component

Now the Provider context is wrap child component . value is set to {this.state} . So in the Child component will be 1 Consumer and will affect the value provided by Provider . And in TH this value = state .

Note: nó sẽ không work nếu các components không được bao bởi 1 Provider :))

Importing Child component without creating a file is of course an error, just create: 3

To summarize the steps, first the Consumer context has been imported, then all components are covered by Consumer

Inside Consumer we declare {context => ( ... )} . context here is just an arbitrary name – you can choose another name

Focus on this paragraph for more analysis

Because here context is transmitted to Consumer and make the connection to the state of the parent component (understood simply can access the value from the provider), so we can use the people . And now all that’s left is to show the values ​​of the people out

Now let’s try to change the value provided by the Provider

Another way we can pass more params for Consumer to use.

And here’s how to call them out:

And now we get to the part of cháu nội : v – the author is so jolly: v

Review the structure is like this Provider> Child> GrandChild. So that means GrandChild component has access to get value received from Provider

Child component is the first component that receives state from the context provider . It then goes ahead to pass the state to Grandchild . As such, even the Grandchild component wrapped in the Child component has access to the parent state


With a small tutorial we get a little rule: State from parent component will pass the child components through Provider . Consumer is used in child componens to allow access to values ​​passed in Provider .


Posts translated from source:

Hope to help you new to ReactJS: bowman

Share the news now

Source : Viblo