title: How to retrieve SmartContract details in react
body: <p>I'm working on a blockchain project and currently facing the interaction between front-end (react) and smartcontract. I need to retrieve my places that have been pushed on the blockchain to show them on the website:</p>
  <p>The smart contract piece that I'm interested interacting to atm:</p>
  <pre><code>contract Prenotation {
      struct Place{
          string name;
          string description;
          bool isActive; //tells if the place is active
          uint256 price; //price per day in wei
          address owner; //owner of the place
  
          //keeps score if the place is booked on a particular day
          //example: isBooked[4] will denote that the place has been booked on th 3th of Jan
          //example 2: isBooked[31] -&gt; the place is booked for the 1th of Feb
          bool[] isBooked;
      }
      
      //Sequential unique placeId for every new Place
      uint256 public placeId;
      
      mapping(uint256 =&gt; Place) public places;
      ...
  </code></pre>
  <p>That's how I tried to retrieve those Places (inside PrenotationContext.jsx):</p>
  <pre><code>const getEthereumContract = () =&gt; {
      const provider = new ethers.providers.Web3Provider(ethereum);
      const signer = provider.getSigner();
      const prenotationContract = new ethers.Contract(contractAddress, contractABI, signer);
  
      return prenotationContract;
  }
  export const PrenotationProvider = ({children}) =&gt; {
      ...
      const [places, setPlaces] = useState([]);
      ...
      const fetchAllPlaces = async () =&gt; {
          try {
              if(!ethereum) return alert(&quot;Please install MetaMask&quot;);
              const prenotationContract = getEthereumContract();
              
              const placeId = await prenotationContract.methods.placeId().call()
              console.log(placeId)
  
              //return object containing places object
              const places = [];
              for (var i = 0; i &lt; placeId; i++) {
                  const place = await prenotationContract.methods.places(i).call();
                  places.push({
                      id: i,
                      name: place.name,
                      description: place.description,
                      price: parseInt(place.price._hex) / (10 ** 18)
                  })
              }
              setPlaces(places)
  
          } catch (error) {
              console.log(error);
              throw new Error(&quot;No ethereum object&quot;);
          }
      }
  </code></pre>
  <p>I fall into the catch with this error:</p>
  <blockquote>
  <p>TypeError: Cannot read properties of undefined (reading 'placeId')
  at fetchAllPlaces (PrenotationContext.jsx:55:57)
  at checkIfWalletConnected (PrenotationContext.jsx:82:31)</p>
  </blockquote>
  <p>I tried to verify if I correctly retrieve the contract and logging it on console after calling <code>getEthereumContract</code> I can successfully see it.</p>
  <p><a href="https://i.stack.imgur.com/ApJmv.png" rel="nofollow noreferrer">Contract inside the web console</a></p>
  <p>In the checkIfWalletConnected I simply call the fetchAllPlaces method.
  It's my first project working with solidity, react and all this so I really don't know how to solve it.</p>