CODEWITHSUNDEEP
javascriptreactjs
Rob Terrell
Rob Terrell

Reputation: 2562

Wrapping last two words in a string with NavLink dynamically

I currently have a string I am concatenating ...see profile to the end of. I am trying to wrap the see profile that is being concatenated in a NavLink from react-router-dom, is this possible and if so what is the best way to go about this. My code is as follows:

import React from "react";
import { NavLink } from "react-router-dom";
import "./styles.scss";

export default function App() {
  let str = `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam hendrerit
nisi sed sollicitudin pellentesque. Nunc posuere purus rhoncus pulvinar
aliquam. Ut aliquet tristique nisl vitae volutpat. Nulla aliquet
porttitor venenatis. Donec a dui et dui fringilla consectetur id nec
massa. Aliquam erat volutpat. Sed ut dui ut lacus dictum fermentum vel
tincidunt neque. Sed sed lacinia lectus. Duis sit amet sodales felis.
Duis nunc eros, mattis at dui ac, convallis semper risus. In adipiscing
ultrices tellus, in suscipit massa vehicula eu. Lorem ipsum dolor sit
amet, consectetur adipiscing elit. Nam hendrerit nisi sed sollicitudin
pellentesque. Nunc posuere purus rhoncus pulvinar aliquam. Ut aliquet
tristique nisl vitae volutpat. Nulla aliquet porttitor venenatis. Donec
a dui et dui fringilla consectetur id nec massa. Aliquam erat volutpat.
Sed ut dui ut lacus dictum fermentum vel tincidunt neque. Sed sed
lacinia lectus. Duis sit amet sodales felis. Duis nunc eros, mattis at
dui ac, convallis semper risus. In adipiscing ultrices tellus, in
suscipit massa vehicula eu.`;

// I am using this as a solution for ensuring my character count doesn't go over 570 words, I have tried a pure css solution but the overflow: hidden would hide the read more.

  if (str.length >= 570) {
    str = str.substring(0, 570) + `... see profile`;
  } else if (str.length <= 570) {
    str = str + `... see profile`;
  }

  return (
    <div className="customer-card-bottom">
      <div className="customer-card-body">{str}</div>
    </div>
  );
}

attached is a code pen for debugging and testing: https://codesandbox.io/s/elated-framework-3v0c4?file=/src/App.js

Upvotes: 2

Views: 153

Answers (1)

Derek Pollard
Derek Pollard

Reputation: 7165

The solution here is use JSX in order to build up the view profile portion:

import React from "react";
import { NavLink } from "react-router-dom";
import "./styles.scss";

function SimpleNavLink({ children }) {
  return <a href="#something">{children}</a>;
}

export default function App() {
  let str = `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam hendrerit
nisi sed sollicitudin pellentesque. Nunc posuere purus rhoncus pulvinar
aliquam. Ut aliquet tristique nisl vitae volutpat. Nulla aliquet
porttitor venenatis. Donec a dui et dui fringilla consectetur id nec
massa. Aliquam erat volutpat. Sed ut dui ut lacus dictum fermentum vel
tincidunt neque. Sed sed lacinia lectus. Duis sit amet sodales felis.
Duis nunc eros, mattis at dui ac, convallis semper risus. In adipiscing
ultrices tellus, in suscipit massa vehicula eu. Lorem ipsum dolor sit
amet, consectetur adipiscing elit. Nam hendrerit nisi sed sollicitudin
pellentesque. Nunc posuere purus rhoncus pulvinar aliquam. Ut aliquet
tristique nisl vitae volutpat. Nulla aliquet porttitor venenatis. Donec
a dui et dui fringilla consectetur id nec massa. Aliquam erat volutpat.
Sed ut dui ut lacus dictum fermentum vel tincidunt neque. Sed sed
lacinia lectus. Duis sit amet sodales felis. Duis nunc eros, mattis at
dui ac, convallis semper risus. In adipiscing ultrices tellus, in
suscipit massa vehicula eu.`;

  if (str.length >= 570) {
    str = str.substring(0, 570);
  }

  return (
    <div className="customer-card-bottom">
      <div className="customer-card-body">
        {str}&nbsp;
        <SimpleNavLink>...see profile</SimpleNavLink>
      </div>
    </div>
  );
}

Doing this allows you to still ensure that the content is below 570 characters, while still being able to use your react elements for the last bit.

Keep in mind, you'd replace the <SimpleNavLink /> with <NavLink />

Upvotes: 2

Related Questions