Answer for https://ethereum.stackexchange.com/questions/112787/how-to-properly-configure-web3-in-a-reactjs-app/112790#112790

112787.js

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

class Wallet extends Component {
    render() {
        return (
            <div className="container1">
                <h1> Wallet Data </h1>
                <p>{this.props.account} </p>
            </div>
        );
    }
}

class App extends Component {
    async createAccount() {
        var account = await this.state.web3.eth.getAccounts();
        this.setState({account: account[0]});
    }


    constructor(props) {
        super(props);
        this.createAccount = this.createAccount.bind(this)
        this.state = { 
            web3: new Web3(new Web3.providers.HttpProvider("http://127.0.0.1:7545")),
            account: '',
        };
    }

    render() {
        return (
            <div className="container">
                <h1>Hello, World!</h1>
                <Wallet account={this.state.account}/>
                <button type="button" onClick={this.createAccount}>Create account
                </button>
            </div>
        );
    }
}

export default App;