Uncaught (in promise) Error: Objects are not valid as a React chid. If you meant to render a collection of children, use an array instead

Question

Im trying to render the output of the polkadot browser extension but i'm getting this error Uncaught (in promise) Error: Objects are not valid as a React child (found: object with keys {address, meta, type}). If you meant to render a collection of children, use an array instead.

I see that it wants me to use an array (or a map?) but i'm unsure of how to implement this

Any ideas?

import ReactDOM from 'react-dom';
import './index.css';
import reportWebVitals from './reportWebVitals';
import {
  web3Accounts,
  web3Enable,
  web3FromAddress,
  web3ListRpcProviders,
  web3UseRpcProvider
} from '@polkadot/extension-dapp';

class UserComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      allInjected: [],
      accountsInfo: []
    };
  }

  async componentDidMount() {
    this.handleButtonClick();
  }

  handleButtonClick = () => {
    const getExtensionInfo = async () => {
      const allInjected  = await web3Enable('test');
      const allAccounts = await web3Accounts();
      //const account = allInjected;
      //const info = address;
      this.setState({
        allInjected,
        allAccounts
      });

    };
    getExtensionInfo();
  };

  render() {
    const allInjected = this.state.allAccounts?.map((a, i) => (
      <li key={i} className="list-group-item">{a}</li>
    ));
    const allAccounts = this.state.allAccounts?.map((a, i) => (
      <li key={i} className="list-group-item">{a}</li>
    ));

    return (
      <div>
        <h1>A user</h1>
        <p>{allInjected}</p>
        <h1>{allAccounts}</h1>
        <button onClick={this.handleButtonClick}>Get Info</button>
      </div>
    );
  }
}

ReactDOM.render(
  <React.StrictMode>
    <UserComponent />
  </React.StrictMode>,
  document.getElementById('root')
);


reportWebVitals();

Answer 1

Your rendering is wrong, try to replace {a} by {a.login} something like this:

const allInjected = this.state.allAccounts?.map((a, i) => (
  <li key={i} className="list-group-item">{a.login}</li> // <=== You are using object `a`, try to change it by your field
));
const allAccounts = this.state.allAccounts?.map((a, i) => (
  <li key={i} className="list-group-item">{a.login}</li> // <=== You are using object `a`, try to change it by your field
));

Answer 2

I've had the same issue before. Basically it means a is an object, and react will be confused how to render it, for example if a = { "user": "Mary", "login": true}, react won't know if it should render it as a string, or just return the values or the keys.

In order to resolve the error you can specify the value / key you'd like to display, for example {a.user}.