could not be able to change my setmessage because (Transaction has been reverted by the EVM:

Question

I am working on react. As I have deployed my contract onto a specific address which have a following code:

pragma solidity ^0.4.17;

contract Lottery{
    address public manager;
    address[] public players;

    function Lottery () public
    {
        manager = msg.sender;
    }

    function enter() public payable
    {
        require(msg.value>.01 ether);
        players.push(msg.sender);
    }

    function random () public view returns(uint)
    {
        return uint (keccak256(block.difficulty,now,players));
    }

    function pickWinner() public restricted 
    {
        uint index = random() % players.length;
        players[index].transfer(this.balance);
        players = new address[](0);
    }

    modifier restricted()
    {
        require(msg.sender==manager);
        _;
    }

    function getPlayers() public view returns (address[])
    {
        return players;
    }
}

my deployed script:

const HDWalletProvider = require('truffle-hdwallet-provider');
const Web3 = require('web3');
const {interface , bytecode} = require('./compile');
const provider = new HDWalletProvider(
    '12 word mnemonic',
    'https://rinkeby.infura.io/v3/myspecificid');

const web3 = new Web3(provider);

const deploy = async () => {
    const accounts = await web3.eth.getAccounts();
    console.log('Attempting to deploy from account',accounts[0]);
    const result = await new web3.eth.Contract(JSON.parse(interface))
                  .deploy({data:'0x'+bytecode})
                  .send({gas:'1000000',from:accounts[0]});
    console.log(interface);
    console.log('contract deployed to',result.options.address);
};
deploy();

my react code :

import React, { Component } from 'react';

import './App.css';
import web3 from './web3';
import lottery from './lottery';
import { __importDefault } from 'tslib';

class App extends Component {
    state ={
        manager:'',
        balance:'',
        players:[],
        value:'',
        message:''
    }

    async componentDidMount() {
    const manager = await lottery.methods.manager().call();
    const players = await lottery.methods.getPlayers().call();
    const balance =await web3.eth.getBalance(lottery.options.address);
    this.setState({manager,players,balance});
}

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

    const accounts = await web3.eth.getAccounts();
    this.setState({message:'Waiting on transaction success....'});

    await lottery.methods.enter().send({
        from:accounts[0],
        value: web3.utils.toWei(this.state.value,'ether')
    });

    this.setState({message:'you have been entered!'});
};

onClick= async () => {
    const accounts = await web3.eth.getAccounts();
    this.setState({message:'waiting on transaction sucess'});
    await lottery.methods.pickWinner().send({
        from:accounts[0]
    });
    this.setState({message:'A winner has been picked!'});
};

render() {

return (
  <div>
    <h2>Lottery contracts </h2>
      <p> This contract is managed by {this.state.manager}</p>
      <p>ther are currently {this.state.players.length} people entering to 
   compete to win {web3.utils.fromWei(this.state.balance,'ether')} ether 
      </p>
  <hr/>

  <form onSubmit={this.onSubmit}>
  <h4>want to try ur luck? </h4>
  <div>
    <label> Amount of ether to enter </label>

    <input
      value={this.state.value}
      onChange={event => this.setState({value: event.target.value})}
    />  

  </div>
  <button>enter</button>  
</form>
<hr/>
<h4>
  Ready to pick a winner?
</h4>
  <button onClick={this.onClick}>
    pick a winner!
  </button>
  <hr/>
  <p> {this.state.message} </p>
</div>
        );
    }
}

export default App;

the problem arises with code when the transaction is being reverted by the evm:

but once i reload the page the transaction is shown as successful as if nothing happened and my contract is working fine. like during transaction the firstsetmessage is working:->waiting for transaction then the message after the onsubmit await function (you have been entered is not executing)

Answer 1

Probably you step on this bug fixed week ago: https://github.com/ethereum/web3.js/issues/2518

Explanation: before Byzantium fork there was no way to reliably detect whether transaction was successful or not. The only clue was amount of gas used by a transactions, because failed transaction was guaranteed to use the whole gas limit, while successful transaction may leave some gas unspent.

Though, this check was not reliable, because successful transaction may spend exactly the gas limit, which probably happened in your case. Workaround would be to set gas limit to the value slightly greater than estimated gas cost of the transaction.

Among other things, Byzantium hard fork introduced two important changes:

1. An ability for smart contract to revert transaction without spending the whole gas limit: EIP140.
2. Transaction receipt now has status flag: EIP658.

So after Byzantium the check described above became even more unreliable, because now even failed transaction may leave some gas unspent. Though another way to reliably check transaction status was introduced, but your old version of Web3 API still used old unreliable strategy, that's why you got this problem.