Submitting data from a Form to the Ledger in React.js

Questions
1

I experimenting with passing information from a Form to the Ledger

My Form data looks like this
…

import React from “react”;

class Covid19Form extends React.Component {
constructor(props) {
super(props);
this.state = {
issuedby: healthclinic,
testnumber: 1
// these are some default values //
}
this.handleInputChange = this.handleInputChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}

handleSubmit(event) { 

 // Function to submit to the Ledger in React.js 

 // NEED HELP HERE //
 
}

handleInputChange(event) {
  const target = event.target;
  const value = target.value;
  const name = target.name;

  this.setState({
    [name]: value
  });
}

render() {
  return (
    <form onSubmit={this.handleSubmit}>
     
      <label>
        Test Date:
        <input
          margin="dense"
          name="testdate"
          type="date"
          value={this.state.testdate}
          onChange={this.handleInputChange} />
      </label>
   
      <label>

            //  More Input Fields Here //
      
       </label>

      <input type="submit" value="Submit" />
    </form>
  );
}

};

export default Covid19Form;

…

I am seeking some help to correctly deal with the handleSubmit Function (see above in code) to correctly submit all the Input fields from a Form to the the Ledger and create and exercise a contract (choice) in react.js

The DAML Cheatsheet mentions ( in JSX)
…

const ledger = useLedger(); const [choiceReturnValue, events] = await ledger.exercise(ContractChoice, contractId, choiceArguments)`
…

Questions:

  1. How do I get the current contractID value assigned when exercising a choice on an existing contract ?
  2. how do I pas the “this.state.X” values as choiceArguments ?
  3. How do I generate a pop-up message for successful submission ?
2

  1. If you know the contract id when creating the form, you can pass it in with the component’s props. Otherwise, you could also do an ad-hoc ledger.fetch(..) in your handleSubmit function.

  2. If your state matches exactly the type required by the choice argument you can pass it in directly, like ledger.exercise(MyTemplate.MyChoice, myContractId, this.state). If not, simply create an object of the required type to pass in from your state. If you’re using Typescript the type checker will guide you. There are some things to be aware of, for example the Decimal type in DAML is represented as string in JavaScript.

  3. I don’t know how to do that with a plain <form>. I’d advise you to use some UI framework that has built-in support for forms and dialogs. If you’re still based on the daml-ui-template, which uses material-ui, check out their example of a form dialog - it shows how to handle the close event based on a button press. You can find a (bit more complex) usage example in our asset servicing app repo.

1 Like