0

I am writing my first Dapp and want to save the value of the form to the blockchain. I am Using React and web3 js 1.0.0-beta.37 on the frontend. Also I am new to react.

Following is my App.js

import React, { Component } from 'react';
import './App.css';
import FormSubmitContract from './contracts/FormSubmit.json';
import TruffleContract from 'truffle-contract';
import getWeb3 from './utils/getWeb3.js';
import $ from 'jquery';


class App extends Component {
 state = {
   web3:null,
   email:null,
   password:null,
   address1:null,
   address2:null,
   city:null,
   state:null,
   zip:null

 };

 componentDidMount = async () => {
   try{
     const web3 = await getWeb3();
     //console.log(web3);
     const accounts = await web3.eth.getAccounts();
    //console.log(accounts);
    const networkId = await web3.eth.net.getId();
    //console.log(networkId);
    //console.log(FormSubmitContract.networks);
    const deployedAddress = 
    FormSubmitContract.networks[networkId].address;
    //console.log(deployedAddress);
    const ContractInstance = new 
    web3.eth.Contract(FormSubmitContract.abi, deployedAddress);

    this.setState({web3, accounts, contract:ContractInstance})
   }catch(error){
    console.log(error);
  }
}

onSubmit = async (event) => {
event.preventDefault();

const FormSubmit = TruffleContract(FormSubmitContract);
FormSubmit.setProvider(this.state.web3.currentProvider);
this.state.web3.eth.getAccounts((error,accounts) => {
  FormSubmit.deployed().then((instance) => {
    // Forminstance = instance;
 }).then(result => {
   return FormSubmit.setData($("#inputEmail4").val(), 
 $("#inputPassword4").val(), $("#inputAddress1").val(),
    $("#inputAddress2").val(), $("#inputCity").val(), 
     $("#inputState").val(), $("#inputZip").val() ,{from: 
     accounts[0]});     
    }).catch(() => {
   console.log("Error in getting the data is printed");
   })
 })
}

setData function in contract

function setData(string memory _email, string memory _password, string 
memory _address1,
string memory _address2, string memory _city, string memory _state, 
string memory _zip) public
{
  email = _email;
  password = _password;
  address1 = _address1;
  address2 = _address2;
  city = _city;
  state = _state;
  zip = _zip;
}

I want to store the submitted form on the blockchain but My problem is I am not getting data and "Error in getting the data" is in the console log.

I think there is a problem in setData as I don't know how to pass the data in the parameter.

If you can share any material regarding the form submission or Initial level Dapp then it will be very helpful.

Thanks.

7
  • can you add your contract code, or at least the method setData(...)
    – Majd TL
    Jun 4, 2019 at 16:18
  • @MajdTL add the setData function. please check Jun 5, 2019 at 10:55
  • Try to use await/async the code looks better than with "then". // Stores data await FormSubmit.methods.setData(.....).send({ from: accounts[0] }); // you need getData method in smart contract const response = await FormSubmit.methods.getData().call();
    – Majd TL
    Jun 5, 2019 at 12:38
  • look at this truffle box it could help you truffleframework.com/boxes/react
    – Majd TL
    Jun 5, 2019 at 12:40
  • anyway you will not get the data, you could get the transaction receipt, to get the data you need another call, you are not using web3 directly so take look at this truffleframework.com/docs/truffle/getting-started/…
    – Majd TL
    Jun 5, 2019 at 13:19

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.