Using functional components instead of class components in Ravenous project

import React, { useState } from 'react';
import './BusinessList.css';
import {Business} from '../Business/Business';

//BusinessList Function Component
export const BusinessList = (businesses) => 
{
    const [BusinessList, SetBusinessList] = useState('No listings...');

    const renderBusinessListings = () => {
        return businesses.map((business) => {
           let listOfBusinesses = SetBusinessList([business]);
           BusinessList = listOfBusinesses;
           return <Business business={business}/>;
        });
    };
    return(
        <div className="BusinessList" >
            {renderBusinessListings()} 
        </div>  
    );
}

// I am trying to follow the steps but use functional components. I am on step 9 of part 2 of the ravenous app. I am trying to pass finish this step but not sure how I can make it work with functional components.

I don’t have the steps in front of me but I can see a few issues comparing with finished project. BusinessList is not supposed to hold any state in the exercise. It is really just a component that renders a list of Business components while passing through the props (the businesses array) held in App so there is no need for useState in the BusinessList component. There is also not any need for logic that assigns values to anything in this component. You may find it easier to complete the exercise as the steps describe initially using Classes and then, after it is working, convert to functional components. I much prefer functional components for React but classes do show up in more advanced coding areas (not React specific) so it is still good to be comfortable with them.

Hey patoman90!

Are you a spanish speaker? Your username means duckman, it made me chuckle :slight_smile:

What are you trying to do here?

    const renderBusinessListings = () => {
        return businesses.map((business) => {
           let listOfBusinesses = SetBusinessList([business]);
           BusinessList = listOfBusinesses;
           return <Business business={business}/>;
        });
    };

the array businesses is defined only if you actually call the function Component BusinessList() passing it an array, when do you do this in your code?

Your state BusinessList is defined as a string, not an array, overwriting it to an array by passing it to the state setter function is not an error per se, but is not a good practice. Imo you should initialize your BusinessList as an array, instead of a string, if you expect it to be an array.

Still on this point, with your map your saying:
"yo, for every element of the array I’m passing you, you gotta overwrite my initial state with that element, then return me an array of Business Components each with a prop the-array-element={the-array-element}"
At the end of mapping, your state BusinessList is going to be just a single element array equal to the last element of the array mapped, not all of array elements. Is this what you expect?

Cheers,

Lol I am learning Portuguese and Pato means duck too kkk.
I changed the functional components to class components. So never mind. I plan to try and convert them into functional components at a alter time.
Thanks