I'm building a web app in ReactJS where I need to show a few links.
Some of this links should end width a ID code and others with others
Example:
https://www.example.com/lorem&[ID-CODE1]
https://www.other.com/lorem&[ID-CODE2]
I need to do this just for 2 different domains.
My code is something like this:
link={type.content?.url}
But should be
link={type.content?.url}&[ID-CODE1] or &[ID-CODE2]
I hope this explanation do not sound too cryptic and you guys and girls could help me with this, please
Do you mean something like this?
function constructURLQuery(url, code) {
return `${url}/?lorem&id=${code}`
}
const LinkComponent = (props) => (
<a href={props.link} title={props.title}>{props.link}</a>
)
const ListComponent = (props) => (
<ul>
{props.links.map(({ id, title, url, code }) => (
<li key={id}>
{title}: <LinkComponent link={constructURLQuery(url, code)} title={title}/></li>
))}
</ul>
)
const links = [
{ id: 1, title: 'example', url: 'https://www.example.com', code: '[ID-CODE1]' },
{ id: 2, title: 'other', url: 'https://www.other.com' , code: '[ID-CODE2]'},
]
const App = (<ListComponent links={links} />)
ReactDOM.render(
App,
document.getElementById("app")
);<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"></div>