How to access data displayed by dangerous html

Question

I have tables that I am displaying using dangerous HTML in reacting hooks

Live Demo : live demo code sand box

Data looks like this

export const json = [
  {
    template: `
    <div ref={tableRef} className="table">
    <table>
      <thead>
        <tr>
          <th>#</th>
          <th>First Name</th>
          <th>Last Name</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>Mark</td>
          <td>Otto</td>
        </tr>
      </tbody>
    </table>
  </div>
    `
  }
];

And here am displaying data using dangerousHTML

......

export default function App(props) {
  const tableRef = useRef("");
  let tables = data.json;

  return (
    <div className="App">
      <input type="text" />
      <div
        ref={tableRef}
        dangerouslySetInnerHTML={{ __html: tables[0].template }}
      />
    </div>
  );
}

Question: What do I need to do to access table data in this table (assume I would like to change name on input change) ?

Answer 1

First off, be careful with this approach, as it's an easy way to open your users to XSS attacks.

In general, setting HTML from code is risky because it’s easy to inadvertently expose your users to a cross-site scripting (XSS) attack. So, you can set HTML directly from React, but you have to type out dangerouslySetInnerHTML and pass an object with a __html key, to remind yourself that it’s dangerous.

That said, in this case you will have to access & manage the dangerously set HTML manually. Since this is a textbook example of a "side effect" do the management within useEffect.

Data fetching, setting up a subscription, and manually changing the DOM in React components are all examples of side effects. - https://reactjs.org/docs/hooks-effect.html

Assuming you create a state value for the input, iVal, you could change the table text like this:

  // ... New state:
  const [iVal, setIVal] = React.useState("");

  // ...
  React.useEffect(() => {
    console.log(tableRef);

    if (iVal) {
      tableRef.current
        .getElementsByTagName("tbody")[0]
        .getElementsByTagName("td")[1].innerHTML = iVal;
    }
  }, [iVal, tableRef]);

  // ... Updated input:
  <input
    type="text"
    value={iVal}
    onChange={(e) => setIVal(e.target.value)}
  />
  // ...

So because of the dependency array ([iVal, tableRef]) your useEffect will update when iVal (or tableRef) changes.

Working example forked from your codesandbox:

• https://codesandbox.io/s/how-to-access-data-displayed-by-dangerous-html-stocu?file=/src/App.js

Answer 2

The way you've set it up, you can technically access the table data indirectly by using tableRef.current, which will give you a reference to the HTMLDivElement object, but you're almost certainly better off refactoring this code to not use dangerouslySetInnerHTML.

Instead, you might want to consider storing the table data as an array of objects like:

[{firstName: "Mark", lastName: "Otto"}, {firstName: "Jack", lastName: "Antonoff"}]

You can store and update this using the useState hook. To loop through and display the data, you'd use a simple map function as detailed in the React docs and output a table row for each element in the array.

Simple working example here.