Estoy tratando de crear una lista de elementos/ticker de desplazamiento vertical que muestre el nombre y el logotipo de cada objeto dentro de la matriz que configuré.

Pude configurar con éxito un ticker de desplazamiento de nombres usando algunas animaciones de webkit en componentes con estilo. Sin embargo, originalmente lo tenía configurado solo como una matriz y ahora estoy agregando logotipos a cada uno, así que decidí cambiarlo a una matriz de objetos que se muestra a continuación:

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

¿Cuál es la forma más fácil de convertir la siguiente función para iterar a través de los objetos para capturar tanto el nombre de la empresa como mostrar el logotipo también?

 <!-- 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> </> ) }

Probé algunas iteraciones de bucle diferentes, pero mi principal problema es iterar el objeto correctamente e insertar esa información en nameArray para mostrar tanto el nombre como la imagen del logotipo. Siento que estoy cerca, pero si alguien puede guiarme en la dirección correcta, se lo agradecería.