App.js

import hasher from './hasher';
import React, { Component } from 'react';
// import Reflux from 'reflux';


class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      raw: ''
    }
  }

  setRaw(raw) {
    this.setState({ raw })
  }

  getHash() {
    return hasher(this.state.raw);
  }

  shouldComponentRender() { return true }

  render() {
    const style = {
      margin: '10px',
      padding: '10px',
      borderStyle: 'solid'
    };

    return (
      <div style={{ display: 'flex' }}>
        <div style={style}>
          <p>input address and tab out</p>
          <input onBlur={this.setRaw.bind(this)} />
          <div style={style}>
            <h1>Response</h1>
            <p>{this.getHash.bind(this)()}</p>
          </div>
        </div>

        <div style={style} >
          <h1>Response</h1>
          <p>{this.getHash.bind(this)()}</p>
        </div>
      </div>
    );
  }
}

export default App;

hasher.js

export default (address) => {
  console.log('COSTLY FETCH');
  return(Math.floor(Math.random() * 10));
}

import hasher from './hasher';
import React, { Component } from 'react';
import ResponseComponent from './ResponseComponent'
// import Reflux from 'reflux';


class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      actual: ''
    }
  }

  setRaw(event) {
    let inputValue = this.refs.inputRef.value
    console.log("input: " + inputValue)
    this.setState({actual: hasher(inputValue)})
  }

  getStyle() {
    return({
      margin: '10px',
      padding: '10px',
      borderStyle: 'solid'
    })
  }

  render() {
    return (
      <div style={{ display: 'flex' }}>
        <div style={this.getStyle()}>
          <p>input address and tab out</p>
          <input ref={'inputRef'} onBlur={this.setRaw.bind(this)} />
          <ResponseComponent hashValue={this.state.actual} style={this.getStyle()}/>
        </div>

        <ResponseComponent hashValue={this.state.actual} style={this.getStyle()}/>
      </div>
    );
  }
}

export default App;

hasher.js

export default (address) => {
  console.log('COSTLY FETCH');
  return(String(address) + String(Math.floor(Math.random() * 10)));
}