import Connect from './connect.svg'
import Explore from './explore.svg'
export const SomeComponent = props => {
const someArray = [
{text: "first", image: Connect},
{text: "second", image: Explore}
]
return (
<div>
{someArray.map(item => (
<img src={item.image} alt="some text" />
<div> {item.text} </div>
))}
</div>
)
}
I have used this method of setting an image property in objects to the corresponding images I imported, and then looping all through to output things like <li> etc. Everything seems to work fine but I want to confirm whether this is a bad way to code or not.
In my opinion it's a good component. However, I think that to render both <img> and <div> element as siblings you may need to group them as children of a Fragment (eg. <> </>). Finally, its a good practice to specify a key. The example below has the suggested changes.
import Connect from "./connect."
import Connect from './connect.svg'
import Explore from './explore.svg'
export const SomeComponent = props => {
const someArray = [
{text: "first", image: Connect},
{text: "second", image: Explore}
]
return (
<div>
{ someArray.map ((item, key) => (
<>
<img src={item.image} alt="some text" key={key}/>
<div key={key}> {item.text} </div>
</>
)}}
</div>
)
}
I hope that my opinion will be helpful.