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.

  • can you add your contract code, or at least the method setData(...) – Majd TL Jun 4 at 16:18
  • @MajdTL add the setData function. please check – urjit on rails Jun 5 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 at 12:38
  • look at this truffle box it could help you truffleframework.com/boxes/react – Majd TL Jun 5 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 at 13:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.