How to retrieve SmartContract details in react

Question

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:

The smart contract piece that I'm interested interacting to atm:

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] -> the place is booked for the 1th of Feb
        bool[] isBooked;
    }
    
    //Sequential unique placeId for every new Place
    uint256 public placeId;
    
    mapping(uint256 => Place) public places;
    ...

That's how I tried to retrieve those Places (inside PrenotationContext.jsx):

const getEthereumContract = () => {
    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}) => {
    ...
    const [places, setPlaces] = useState([]);
    ...
    const fetchAllPlaces = async () => {
        try {
            if(!ethereum) return alert("Please install MetaMask");
            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 < 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("No ethereum object");
        }
    }

I fall into the catch with this error:

TypeError: Cannot read properties of undefined (reading 'placeId') at fetchAllPlaces (PrenotationContext.jsx:55:57) at checkIfWalletConnected (PrenotationContext.jsx:82:31)

I tried to verify if I correctly retrieve the contract and logging it on console after calling getEthereumContract I can successfully see it.

Contract inside the web console

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.

Answer 1

In your current for implementation, if extracting fails in the middle of the operation, you are not going to get all places, you will get some of them. Instead

let places
try{
    // check if placeId is a string or number. I think Should be string
    const placeId = await prenotationContract.methods.placeId().call()

    places = await Promise.all(
         // since your for loop is till placeId
         Array(parseInt(placeId))
             .fill()
             .map((element, index) => {
                // since places is public, solidity assgins a getter automatically
                return prenotationContract.methods.places(index).call();
              })
           );
} catch (e) {
       console.log("error in extracting places", e);
    }