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

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.

Answer 2

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;