I’m working on a DApp and just I started developing the front end. At first, I was just using Web3 and React but it was a nightmare trying to connect to MetaMask and get everything to be reactive.

This is where Drizzle comes in.

Drizzle is a library that takes care of handling the user’s provider (MetaMask, Mist, etc.) and making all the incoming data play nice with React. The only catch is that it’s kind of confusing to get started with. It took me about 3 hours to figure out what Drizzle was doing, so I want to make sure no one else has to go through that.

Setting up Truffle and Drizzle

The first step is to set up Truffle and Drizzle. Truffle comes with a collection of “boxes” that are basically just templates. Follow these steps to set up your Drizzle template.

This will set up Truffle with a small collection of simple contracts and a basic front end. The main file for this project is the Home layout ( Home.js ). Here’s where Drizzle comes into play.

Here’s where it get’s confusing.

Home.js, How is it Getting Data?

First, take a look at HomeContainer.js.

mapStateToProps is going to tell Drizzle which contracts you want to get as stateful props. When you call drizzleConnect , these contract states will then be passed as props to your component.

These props are just states that contain the data you’ve received for a certain contract. You can’t make any kind of calls with these objects.

If you want to make any contract calls, you need to use the drizzle variable that’s given to a component via context (this will make more sense when we make our own component). Home doesn’t ask for the drizzle variable though, so it needs some help to get data.

Let’s look at a line of code in Home.js

The contract SimpleStorage has a method called storedData which simply returns whatever data is being stored in the contract.

ContractData is a component given to us by drizzle-react-components .

You can look at the source code for ContractData here.

ContractData is it’s own Drizzle connected component that will make a call to the contract and display the data as text. This is great for testing, but what if we want to render the data in another way?

Creating Our Own Drizzle Component

First, let’s make the container. I’ll be calling this component GetTokens because it will be simply getting the current user’s balance from the TutorialToken contract.

In mapStateToProps , I tell Drizzle that I want to get the data from the TutorialToken contract as a prop. I then call drizzleConnect to create the container, using GetTokens as the component.

First look at lines 31–33. I’m making sure I specify that this component should receive the drizzle variable in the context. This is what holds all the actual objects for my contracts and allows me to make calls.

Now look at lines 9 and 10. I get the drizzle variable from the context, and then make the balanceOf cacheCall which will return the key for the data, and cache the result in the TutorialToken prop.

We now need to get the data using this key.

In line 21 we now see how the contract props are used. The TutorialToken object that’s passed as a prop will have an object for each method. When a call to a method is made, the prop will be updated with the result reactively.

We then use the dataKey we got from the cacheCall to get the value.

Conclusion

I know I didn’t do the best job writing this out, but hopefully just that simple example of a component that receives data from a contract will be helpful!

In summary, you need to get the state of a contract as a prop, but also get the drizzle variable in order to make calls.

If anything is still confusing let me know in the comments and I’d be glad to help!