How to render SVG images inside a div

Question

I'm new to react and i hope someone can help me with this. I've searched everywhere for a solution to my problem with no luck.

Basically i want to render an array of SVG images inside a div as a backgroundImage: url(). I've managed to render my array with math.random but i want the SVG images to render in same order as in the array.

This is my code so far:

import './ListView.css';
import Green from '../Assets/ListCard/Green.svg';
import Brown from '../Assets/ListCard/Brown.svg';
import Orange from '../Assets/ListCard/Orange.svg';
import Mail from '../Assets/Icons/Mail.svg'
import Phone from '../Assets/Icons/Phone.svg'


function ListView({ userData}) { 


  const cardImages = [Green, Brown, Orange]; /// Array


  const renderList = cardImages.map(function(image) { /// Tried to map through the array with - 
    return image;                                     /// no luck
  }) 
 
  /// This Math.radom method works, but not the solution i want
  const randomItem = cardImages[Math.floor(Math.random()*cardImages.length)];

  

  return (         /// Below inside the div is where i want to render the images. 
        <div className="list-card" style={{backgroundImage: `url(${renderList})`}}> 
          <div className="list-card-wrapper">
            <div className="list-user-image"><img  src={userData.picture.medium} alt=""/></div>

            <div className="list-user-info">
              <div className="list-user-name">{userData.name.first} {userData.name.last}</div>          
              <div className="list-user-location">{userData.location.city}</div>
            </div>

            <div className="list-user-contact">    
              <img height={19} src={Mail} alt="svg"/>
              <img height={19} src={Phone} alt="svg"/>
            </div>
        </div>
      
    </div>
    

  )

}

export default ListView```
 

Answer 1

you will need import image and bind it like below:

import logo from './logo.svg';

function App() {
  return (
    <div className="App">
      <img src={logo} className="App-logo" alt="logo" />
    </div>
  );
}
export default App;

Answer 2

This is what you might be looking for:

import "./styles.css";

export default function App() {
  const items = [
    { name: "first" },
    { name: "second" },
    { name: "third" },
    { name: "fourth" },
    { name: "fifth" },
    { name: "sixth" }
  ];

  const colorArray = ["green", "brown", "orange"];

  return (
    <div className="App">
      {items.map((item, index) => {
        const classColorIndex = index % 3;
        return (
          <div
            className={`list-card ${colorArray[classColorIndex]}`}
            key={index}
          >
            <p>{item.name}</p>
          </div>
        );
      })}
    </div>
  );
}

The main concept behind this is, that you have to focus on the index of the item and check if it the first , second , or third item (I am considering it 3 because you have 3 colors in the array). Now, according to index number, you need to add a class to that div, and using CSS, you could provide background to each div according to that array.

In this sample, I have used plain background color, but I have commented how you could use svg as well. on APP.css, and here is the css

.App {
  font-family: sans-serif;
  text-align: center;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.list-card {
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  flex-basis: 50%;
}
.list-card.green {
  background: green;
  /* background:url('../../Green.svg'); */
}
.list-card.brown {
  background: brown;
}
.list-card.orange {
  background: orange;
}

and here is the sandbox link:

https://codesandbox.io/s/stack-overflos-sample-z0yxyk?file=/src/App.js

On this example, you can see background is assigned, exactly to the array.