title: Calling solidity functions to reactJS
body: <p>I'm new to ReactJS &amp; Solidity. I'm testing the web interface of a solidity smart contract.</p>
  
  <p>The main goal of the smart contract is to take to add files (description+hash) and request the number of files.</p>
  
  <p>When I test it with remix it works very well, so the problem is in the connexion between Solidity and React.</p>
  
  <p>Any help?</p>
  
  <pre><code>import React, { Component } from 'react';
  import Layout from '../../components/Layout';
  import { Form, Button, Input, Message } from 'semantic-ui-react'
  import auction from '../../src/auction';
  import web3 from '../../src/web3';
  
  class FileNew extends Component {
    state = {
      description: '',
      hash: '',
      fileCounts: ''
    };
  
    async componentDidMount() {
      const manager = await auction.methods.manager().call();
      const fileCounts = await auction.methods.FileCounts().call();
      this.setState({ manager, fileCounts });
    }
  
    onSubmit = async (event) =&gt; {
      await auction.methods.addFile(this.setState.description, this.setState.hash);
    }
  
    render() {
      return (
        &lt;Layout&gt;
       &lt;h1&gt; Create new file &lt;/h1&gt;
        &lt;Form &gt;
            &lt;Form.Field&gt;
              &lt;label&gt;desc&lt;/label&gt;
              &lt;Input label="First Name" labelPosition="right" value={this.state.description}
               onChange={event =&gt;
                 this.setState ({description: event.target.value})}
               /&gt;
               &lt;label&gt;hash&lt;/label&gt;
               &lt;Input label="Last Name" labelPosition="right" value={this.state.hash}
                onChange={event =&gt;
                  this.setState ({hash: event.target.value})}
                /&gt;
                &lt;Button type='submit' onClick={this.onSubmit}&gt;Submit&lt;/Button&gt;
  
            &lt;/Form.Field&gt;
            &lt;p&gt;The number of files is {this.state.fileCounts}&lt;/p&gt;
          &lt;/Form&gt;
       &lt;/Layout&gt;
      );
    }
  }
  export default FileNew
  </code></pre>