EatTheBlocks Forum

Dynamically add contract to Drizzle

Here is a quick solution for:

  • adding a new contract to Drizzle (dynamically, after initialization)
  • dynamically rendering a UI for this contract

To add a new contract to Drizzle:

  • Deploy the contract with web3 (not necessary, maybe that its already deployed…)
  • Call the addContract() method of Drizzle with the contract name and a web3 contract instance
const response = await myContract

  name: 'myContract', 
  web3Contract: new web3.eth.Contract(
 setShowNewUI(); //React Hook, or setState() if using old React API

Then conditionally render a React component where you have the a ui for the new contract(<NewUI /> below). This component will have access to the new contract via Drizzle.

return (
    {showNewUI ? <NewUI /> : null}

BONUS: If you want to make the contract name dynamic:

  • Save the dynamic name in state just after you call addContract() on Drizzle with the name
  • When you render the ui component of the new contract, pass a prop with the dynamic name
  • Inside this component, use this props to know which contract name to refer to in Drizzle

PS: the official docs for dynamically adding a contract to Drizzle are here:

Thanks for that, and I’m still struggling with it !! Below is MyContract.js which is the interface for MyContract.sol that will be add automatically as you explained. Can I ask you kindly to complete the code? I tried to do so but I got this error

Parsing error: Can not use keyword 'await' outside an async function


import React, { Component } from "react";

class MyContract extends Component {
  state = {};

  render() {
    return (
export default MyContract;

In Javascript, you can only use await in async functions. I dont know exactly where you got this error, but to solve it you ned to wrap the await call in an async function like this:

async function foo() {
  //do stuff
  await someAsyncOperationHere();

Please see below. I want to access an instance of Operator.sol. I still get error :frowning:

import React, { Component } from "react";
import OperatorCntract from "../../contracts/Operator.json";

class Operator extends Component {
  state = { dataKey: null };

  componentDidMount() {
    const { drizzle } = this.props;
    var OperatorCntractConfig = {
      contractName: "Operator",
      web3Contract: new drizzle.web3.eth.Contract(

    const Operator = drizzle.contracts.Operator.address;

  render() {
    return <div></div>;
export default Operator;

What is the error you are getting?