Error: Returned error: VM Exception while processing transaction: out of gas - react-redux

Question

I have a simple smart contract deployed on the local truffle env using migrate. I am using react-components package to work with the smart contract.
So my issue is that simple getters and setters are working, but when I try to run a method with 2-3 arguments I am getting this exception.
My truffleconfig is as follows:
module.exports = {
// See <http://truffleframework.com/docs/advanced/configuration>
// to customize your Truffle configuration!
contracts_build_directory: path.join(__dirname, "app/src/contracts"),
networks: {
develop: { // default with truffle unbox is 7545, but we can use develop to test changes, ex. truffle migrate --network develop
host: "127.0.0.1",
port: 8545,
network_id: "*",
gas: 6921975,
gasPrice: 25000000000
}
},
solc: {
optimizer: {
enabled: true,
runs: 200
}
}
};
And in my react component I am calling like this:
<div className="section">
<h2>Testing Poni</h2>
<p>
This is a initial test to create Poni
</p>
<p>
<strong>Stored Value: </strong>
<ContractData
drizzle={drizzle}
drizzleState={drizzleState}
contract="PoniOwnership"
method="getMyPonies"
/>
</p>
<ContractForm drizzle={drizzle} contract="PoniOwnership" method="createPoni" />
</div>
My solidity functions are like this:
function createPoni(string memory _code, string memory _imgLink) public onlyOwner poniIsUnique(_code){
uint randDna = _generateRandomDna(_code);
//!!pass imgHash here also later
_createPoni(_code, _imgLink, randDna);
}
function _createPoni(string memory _code, string memory _imgLink, uint _dna) private {
uint id = ponies.push(Poni(msg.sender, _code, _imgLink, _dna, 0, true)) - 1;
poniToOwner[id] = msg.sender;
codeToId[_code] = id;
ownerPoniCount[msg.sender] = ownerPoniCount[msg.sender].add(1);
emit NewPoni(id, _code, _imgLink, _dna);
}
struct Poni {
address owner;
string code;
string imgLink;
uint dna;
}
I have tried to additionally send gas from the drizzle react-component as options are given here: https://www.trufflesuite.com/docs/drizzle/react/react-components, but it throws errors saying function is not payable. I am not able to figure out how to deal with this exception.

Answer 1

You want to set a higher gas for the transaction
You want to tweak the sendArgs({gas:}) on the ContractForm component.
https://www.trufflesuite.com/docs/drizzle/react/react-components#contractform