Question 294222 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Display a short version of long string on a div in React TS

I am working on a React component that receives a long string and a numerical variable as props. The component’s objective is to display a trimmed version of the string, based on the specified number variable. Additionally, it should include "show more" and "show less" buttons.

Despite attempting various approaches, none have proven successful. The original single-line string becomes multi-lined when placed within a div with defined width and height. My primary challenge arises when using the "useRef" hook to access textRef.current.innerHTML, which returns the original string without ‘n’ characters.

Do you have any suggestions on how to address this issue?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Following @AdamBasha answer and this video, here's the solution. Note that the main css attribute, WebkitLineClamp, is being changed dynamically in the react code:

    import React, { useEffect, useState } from "react";
import "./style.css"
export function ParagraphText({ text, lines }: { text: string; lines: number }) {
  const [showMore, setShowMore] = useState(true);
  const [textClass, setTextClass] = useState("show_trimmed_text");
  const dynamicStyle = {
    WebkitLineClamp: lines,
  };
  const handleShowButton = () => {
    if (showMore) {
      setShowMore(false);
      setTextClass("show_full_text");
    } else {
      setShowMore(true);
      setTextClass("show_trimmed_text");
    }
  };

  return (
    <div>
      <div className={textClass} style={dynamicStyle}>
        {text}
      </div>
          {showMore ? (
            <div onClick={handleShowButton}>Show More </div>
          ) : (
            <div onClick={handleShowButton}>Show Less </div>
          )}

    </div>
  );
}

    and

    .show_trimmed_text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.show_full_text {
    display: block;
}

  2. 0

    I don’t know how you are trying to achieve it, but this is a working example of a Read more and Read less that I have developed.
    I hope it helps

    "use client"
import React, {useEffect, useState} from "react"
export function ReadMore({fullParagraph}: {fullParagraph: string}){
    const [text, setText] = useState<string>('');
    const [more, setmore] = useState<boolean>(true)
    useEffect(()=>{
        if(more){
            setText(fullParagraph.substring(0, 300))

        }else{
            setText(fullParagraph)
        }
    })
    const full = ()=>{
        setmore(false)
    }
    const less = ()=>{
        setmore(true)
    }
    return(
        <div className="">
            <p>
                {text} 
            {more?(
                <a className=" cursor-pointer" onClick={full}> Read More</a>
            ):(
                <a className=" cursor-pointer" onClick={less}> Read Less</a>
            )}

            </p>
            
        </div>
    )
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search