I am working with a React Component that is rendered using the map function below:
<div className="links-container">
{links.map((link, i) => (
<Links
key={link.text}
icon={link.icon}
text={link.text}
isRight={i % 2 === 0 ? true : false}
/>
))}
</div>
import React, { Component } from "react";
export default class Links extends Component {
render() {
const { icon, text, isRight } = this.props;
return (
<div style={{ alignSelf: isRight ? "flex-end" : "" }}>
<div className="link">
<img
className="link-img"
src={icon}
alt="link"
style={{ borderColor: isRight ? "#1689FC" : "#FD003A" }}
/>
<div className="link-text">{text}</div>
</div>
</div>
);
}
}
My goal is to change the order in which the image and text are rendered based on the value of isRight. I want the text to be rendered first if isRight is true, and the image to be rendered first if isRight is false. Currently, I am using an if statement with repetitive code like this:
isRight ? <div><text/><img/></div> : <div><img/><text/></div>
However, I am exploring alternative solutions as my current approach involves redundant code, which defeats the purpose of having the Links Component in the first place.