medium-ocr-react-generate2

App.js

<button onClick={this.generateText} className="button">Generate</button>

...

{ /* Results */ }
<section className="results">
  { this.state.documents.map((value, index) => {
    return (
      <div key={index} className="results__result">
        <div className="results__result__image">
          <img src={this.state.uploads[index]} width="250px" />
        </div>
        <div className="results__result__info">
          <div className="results__result__info__codes">
            <small><strong>Confidence Score:</strong> {value.confidence}</small>
          </div>
          <div className="results__result__info__codes">
            <small><strong>Pattern Output:</strong> {value.pattern.map((pattern) => { return pattern + ', ' })}</small>
          </div>
          <div className="results__result__info__text">
            <small><strong>Full Output:</strong> {value.text}</small>
          </div>
        </div>
      </div>
    )
  }) }
</section>