I have a React Component which is rendered by this map function:
<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>
);
}
}
And what I want to do is, if the isRight
is true, I want to render the text first and then the img, if isRight
is false, I want to render the image and then the text. Now, I am aware that I could wrap this thing in a big if statement like this:
isRight ? <div><text/><img/></div> : <div><img/><text/></div>
But I am wondering if there's a better way to do this because my approach uses repetitive code, which is the reason why I have this Links Component in the first place.
You can use display:flex
and flex-direction
property on <div className="link">
flex-direction: row-reverse
or flex-direction: column-reverse
depending on your layout.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With