this.state.manager returning an empty array

Question

I've made a solidity contract which was deployed perfectly. Now, when I'm connecting with it my react Dapp after getting the ABI and address and trying to render it, it renders nothing.

my web3.js file

import Web3 from 'web3';

const web3 = new Web3(window.ethereum);
window.ethereum.enable();


export default web3;

my address(on which contract was deployed) and ABI

import web3 from './web3';

const address = '0x6D4ee9C2084FAe71562B5dcbe481F60B9aF61e4d';

const ABI = [
{
  inputs: [],
  stateMutability: 'nonpayable',
  type: 'constructor',
  constant: undefined,
  payable: undefined,
  signature: 'constructor'
},
{
  inputs: [],
  name: 'enter',
  outputs: [],
  stateMutability: 'payable',
  type: 'function',
  constant: undefined,
  payable: true,
  signature: '0xe97dcb62'
},
{
  inputs: [],
  name: 'getPlayers',
  outputs: [ [Object] ],
  stateMutability: 'view',
  type: 'function',
  constant: true,
  payable: undefined,
  signature: '0x8b5b9ccc'
},
{
  inputs: [],
  name: 'manager',
  outputs: [ [Object] ],
  stateMutability: 'view',
  type: 'function',
  constant: true,
  payable: undefined,
  signature: '0x481c6a75'
},
{
  inputs: [],
  name: 'pickWinner',
  outputs: [],
  stateMutability: 'nonpayable',
  type: 'function',
  constant: undefined,
  payable: undefined,
  signature: '0x5d495aea'
},
{
  inputs: [ [Object] ],
  name: 'players',
  outputs: [ [Object] ],
  stateMutability: 'view',
  type: 'function',
  constant: true,
  payable: undefined,
  signature: '0xf71d96cb'
}
];
export default new web3.eth.Contract(ABI, address);

and finally, my react app

import web3 from './web3';
import lottery from './lottery';
import { Component } from 'react';

class App extends Component {

  state = {
    manager: ''
  }

  async componentDidMount(){
    const manager = await lottery.methods.manager().call();
    this.setState({ manager });
    console.log(manager) //can't understand the problem so console it. 
  }
  
  render(){
    return (
      <div>
        <h2>LOTTERY CONTRACT</h2>
        <p>This contract is managed by {this.state.manager}</p>
      </div>
    );
  }
}

export default App;

After console.log(manager) I got this empty array with no address.

Answer 1

Before deploying to the test network, stringify your abi and then copy the output into the react file. example: console.log('Contract ABI', JSON.stringify(abi)). this will give you a different output compared to the one you have.