score:0

Accepted answer

you could create a truncate function, and use it when the show more button has been clicked.

i found a truncate function from this answer.

so your code might look something like:

// create a function that only returns a certain amount of characters.
// i've just used 5 as it's what the original stack question did
const truncate = (input) =>
  input.length > 5 ? `${input.substring(0, 5)}...` : input;

function app() {
  // create a toggle state
  const [showtruncate, setshowtruncate] = usestate(true);

  let content =
    "lorem ipsum dolor sit amet, consectetur adipisicing elit. atque consectetur debitis deserunt dicta dignissimos est et excepturi facere facilis fugit id in, ipsa quae reiciendis repellendus suscipit unde veniam voluptas";

  // when the toggle is active, show the truncated text
  // if not, show the text in full. 
  return (
    <div classname="app">
      <button onclick={() => setshowtruncate(!showtruncate)}>show more</button>
      <p>{showtruncate ? truncate(content) : content}</p>
    </div>
  );
}

Related Query

More Query from same tag