javascriptreactjsreact-hooksuse-reftemplate-strings

How to access data displayed by dangerous html

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

Solution

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