How to style independent links in React

uservnMl1 0
Viewed 29

could anyone please help me here? I have 2 column link menu in footer 4 links in each column. Each link has an id from 1 to 8. For the links 5 to 8 I would like to add a custom icon/png in front of the text.

It should be like this:
Main (flag) England
About (flag) Scotland
Services (flag) Wales
Contact (flag) North Ireland

Is there even a way to do it correctly without some massive way around? Many thanks!

next.js reactjs
1 Answers

You can use index for this. Check if the index is greater then 3 then return JSX with image if not return JSX without the image.

Example Code:

import React, { useState } from "react";

const App = ({ ...props }) => {
  const [links, setlinks] = useState([1, 2, 3, 4, 5, 6, 7, 8]);

  return (
    <div>
      {links.map((link, index) => (
        <div>
          {index > 3 ? (
            <div>
              <a>{link}</a>
               <img src="YOUR IMAGE" /> 
            
            </div>
          ) : (
            <a>{link}</a>
          )}
        </div>
      ))}
    </div>
  );
};

export default App;
userUquV0
Related