App.js

...
class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      bet: {},
      web3: null,
    };
  }

  componentWillMount() {
    getWeb3
      .then(results => {
        this.setState({
          web3: results.web3,
        });
        jediBet.setProvider(this.state.web3.currentProvider);
        this.getBet();
      })
      .catch((error) => {
        console.log("Error finding web3. " + error);
      });
  }

  ...
  
  placeBet(guess, amount) {
    jediBet
      .deployed()
      .then(instance => {
        return instance.createBet(guess, { from: this.getAccount(), value: this.state.web3.toWei(amount, "ether") });
      })
      .then(result => {
        this.getBet();
      })
      .catch((error => console.log("Error:" + JSON.stringify(error))));
  }

  takeBet(guess) {
    jediBet
      .deployed()
      .then(instance => {
        return instance.takeBet(guess, { from: this.getAccount(), value: this.state.web3.toWei(this.state.bet.betAmount, "ether") });
      })
      .then(result => {
        this.getBet();
      })
      .catch((error => console.log("Error:" + JSON.stringify(error))));
  }

  payoutBet() {
    jediBet
      .deployed()
      .then(instance => {
        return instance.payout({ from: this.getAccount() });
      })
      .then(result => {
        this.getBet();
      })
      .catch((error => console.log("Error:" + JSON.stringify(error))));
  }
 ...
  render() {

    return (
      <div className="App" >
        ...
              <BetComponent
                account={this.getAccount()}
                bet={this.state.bet}
                placeBet={(guess, amount) => { this.placeBet(guess, amount) }}
                takeBet={(guess) => { this.takeBet(guess) }}
                payoutBet={() => { this.payoutBet() }}
              />
        ...
      </div>
    );
  }
}

export default App;