How to call a contract function from ReactJS, that takes a struct as an argument?

Question

I am struggling to figure out how to actually call a function (using React) in a contract that takes a struct as an argument (which also has another struct in it) ?

The contract function looks like this:

function createCampaign(CampaignInput calldata input_) external {
//code here
}

The structs that are involved are:

struct ItemInput {
    string name;
    uint256 value;
    uint256 supply;

}

struct CampaignInput {
    string name;
    uint256 campaignType;
    ItemInput[] items; 
}

I have loaded the contract using Ethers.js in React and I am trying to call it using this code, which is obviously very wrong:

contract.createCampaign({"name",0,[]})

Other methods, that do not have a struct as an argument, work just fine using the method above.

My question is what do I need to write in the line above so that I can pass the proper arguments to the contract.

Answer 1

This depends on your js library that is used to interact with the contract.

For Ethers (and probably also web3js) you can either use an object with keys or nested arrays.

So for your example:

const items = [
  {
    name: "Item 1",
    value: 0,
    supply: 100
  }
]
contract.createCampaign({ name: "name", campaignType : 0, items })

Answer 2

I had a similar issue representing a struct as a dict using ethers.js. If anyone is having issues from passing a struct as a javascript dict, an array might work:

[value1, value2]

instead of

{key1 : value1, key2: value2} didn't work but