Quiero agregar funciones de leer más y leer menos a un párrafo usando la clase

Estoy renderizando componentes como este

 <table border="1"> <tbody> {data ? Object.keys(data).map((item) => { return ( <tr key={"tr" + item}> {data[item] ? Object.keys(data[item]).map((key) => { return ( <td key={"td" + key} className={key === "description" && "read-more"} > {data[item][key]} </td> ); }) : null} </tr> ); }) : null} </tbody> </table>

Y la salida es esta

 <table border="1"> <tbody> <tr> <td>New expense</td> <td>default</td> <td>10000</td> <td class="read-more"> Long paragraph.. </td> </tr> <tr> <td>New New exp</td> <td>default</td> <td>123</td> <td class="read-more"> Long paragraph.. not displaying due to stack overflow too much code thing </td> </tr> </tbody> </table>

Así que estoy haciendo muchos párrafos usando objetos y esto también se ejecuta en otros componentes.

Entonces, todo lo que quiero es una función en la que sea para cada uno o use cualquier bucle para obtener la clase de elementos llamada leer más y agregarle una función en la que cree una etiqueta de anclaje para leer más y leer menos usando solo una clase para etiqueta p

Por favor, resuelva mi problema. Gracias