I want to add read-more and read-less functions to a paragraph using class

I am rendering components like this

<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>

And the output is this

<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>

So I am making many paragraphs using objects and this runs in other components too

So all I want is a function in which it for each or use any loop to get elements class named read-more and add function to it in which it creates an anchor tag for read-more and read-less by only using a class to p tag

Please solve my problem. Thanks