Web3.js and React – How to Map Web3 to a React.js State

First, you don't want to think of contracts as analogous to tables. Each contract can hold multiple mappings of information. You could have a single ReviewSystem.sol that has mappings for both Restaurants and Reviews, and in line with what you suggested earlier you could have addRestaurant() and addReview() methods that would add records to the mappings stored on the contract.

That said, contracts don't have very good mechanisms for normalized relational data. In a relational database, if you had a "Restaurant" record you could run a query for all reviews relating to a certain restaurant, and with the power of indexes and query planners get that information back very quickly. In Ethereum your options are more limited. If you don't have an index you'll have to scan over every review in your system to see if it relates to the restaurant in question. If you do have an index, you increase the costs of writing records to your contract. You might also denormalize the data for faster lookups, again at a cost of increased contract storage.

One option is to keep some of your information off-chain. For example you might keep your restaurants and reviews on your contract with a pointer from Review to Restaurant. Separately you might have a traditional database that indexes the relationship from Reviews to Restaurants. When someone adds a review via your DApp the contract stores the canonical information, and the separate database keeps a copy of the information. When someone wants to look up the reviews relating to a certain restaurant, they might query an API backed by the database which can quickly return the IDs for the reviews, and they can get the reviews themselves from the blockchain. In this case, all of the critical information is available on-chain, and the off-chain index can be reconstructed from the contract state. To learn about tracking contract events off chain, read about Events and Logs.

As you noted in your edit, every piece of information you save to a contract costs gas, and that gas in turn costs Ether. Running a service like Yelp with hundreds of thousands of businesses and thousand word reviews could prove very expensive. You could mitigate some of the costs by storing more information off-chain. Perhaps on-chain a review consists of a star rating and the hash of the written review, then the review text is retrieved from an off-chain source such as the database we discussed earlier, or perhaps another decentralized system like ipfs.

In general though, I see the Ethereum block chain as the place where you store information that you don't want to trust third parties to manage. Things like ERC20 tokens, ENS, and distributed exchanges are a great use case because it would otherwise be difficult to establish trust in a centralized entity. While it would be neat to have something like a decentralized review service, the cost of contract storage combined with the relatively low risk of trusting a third party to manage that information make it a less attractive use case for the blockchain.

Try it this way:

import React, { Component } from 'react';
import web3 from './web3';

class App extends Component {
  state = { lastWinner: 0, numberOfBets: 0, minimumBet: 0, totalBet: 0, maxAmountOfBets: 0 };

  async componentDidMount() {
    const lastWinner = await blackjack.methods.lastWinner().call();
    const numberOfBets = await blackjack.methods.getNumberOfBets().call();

    this.setState({ lastWinner, numberOfBets });
  }

I would create a separate file to house all configuration code around the web3 library that would look like this:

import Web3 from 'web3';

const web3 = new Web3(window.web3.currentProvider);

export default web3;

Now, I utilized ES2016 way of initializing state where you no longer need the constructor() function.

You want to setup your own local instance of web3 and rip out the provider from the injected copy that is coming from Metamask and this will allow your instance of web3 to automatically connect to the Rinkeby test network and make use of all the accounts assigned to the Metamask extension.

So I created a new instance of web3 and simultaneously ripped out the injected copy of web3 provided by metamask. To rip out the provider is where you see the reference to window global variable.

Metamask injects web3 onto web3 global variable. The currentProvider has been pre configured for the Rinkeby test network.

You can then import it to the App file as I displayed above and then console it out to ensure it works like so:

import React, { Component } from 'react';
import web3 from './web3';

class App extends Component {
  state = { lastWinner: 0, numberOfBets: 0, minimumBet: 0, totalBet: 0, maxAmountOfBets: 0 };

  async componentDidMount() {
    const lastWinner = await blackjack.methods.lastWinner().call();
    const numberOfBets = await blackjack.methods.getNumberOfBets().call();

    this.setState({ lastWinner, numberOfBets });
  }

  render() {
    console.log(web3.version);
  }