CODEWITHSUNDEEP
javascriptreactjsloopsjavascript-objectsticker
iocoder
iocoder

Reputation: 1

Iterating through an array of objects in react to display a vertical scrolling item (Name & Logo)

I'm trying to create a vertical scrolling ticker/item list that displays the name and logo of each object within the array I set up.

I was able to successfully set up a scrolling ticker of names using some webkit animations on styled components. I originally had it set up as just an array though and now I'm adding logo's to each so I decided to change it to an array of objects shown below:

    export const businessNames = [

        {
            "name":"example name",
            "logo":"logo-url.com/business.jpeg"
        },
        {
            "name":"business name two",
            "logo":"https://sirv.com/logourl.jpeg"
        }
    ]

What's the easiest way to convert the following function to iterate through the objects to capture both the name of the business and display the logo as well?

<!-- language: reactjs -->
import { businessNames } from './businesses';
import { BusinessName } from './styles/index.jsx';

    function VerticalTicker(){
        const renderBusinesses = (names) => {
            let nameArray = [];
            let tickerCount = 0;
            let delay = 0;

            for(const name of names){
                nameArray.push(
                    <BusinessName tickerCount={tickerCount} delay={delay}>{name}</BusinessName>
                )
                tickerCount++;
                delay+= 0.5;
            }
            return nameArray;
        }

return(
        <>

            <div >
                    {renderBusinesses(businessNames)}
            </div>
        </>
    )
}

I've tried a few different looping iterations but my main problem is iterating the object correctly and pushing that info into the nameArray to display both the name and logo image. I feel like im close but if someone can guide me in the right direction i would appreciate it

Upvotes: 0

Views: 502

Answers (1)

Bilal Abraham
Bilal Abraham

Reputation: 184

To display an array of objects in jsx you can use javascripts .map() function

{businessNames &&
businessNames.map(({ name, logo }) => (
    <p>{name}</p>
    <p>{logo}</p>
))}

I dont quite understand the makeup of your BusinessName component, but its much easier to do the iterating in the jsx.

(If you want to clarify comment)

Upvotes: 0

Related Questions