0

I've just started learning react so I was wondering if there's a way to do this or even if it's the correct way of doing it.

I have in my App.js a component called DeckTable

return (
    <>
      <DeckTable decksCompared={decksCompared} sideboardsCompared={sideboardsCompared} decks={decks} headerCompared={headerCompared} />
    </>
)

In the DeckTable.js I'll use those values passed from the App.js and create a table concatenating strings and return it using dangerouslySetInnerHTML, like so:

var html = '<table>...</table>'
return <div dangerouslySetInnerHTML={{ __html: html }} />

Is this the best/correct way of doing it? If I need to call a function now after the table is rendered on the screen where/how would I do that?

If you guys need any more info, just ask.

Thank you so much.

Lucas Hoffmann
  • 111
  • 1
  • 6
  • Why would you generate the HTML yourself? Why not *actually* use React to make the table for you? React allows you to use stuff like `Array.map` to render table rows. There's (almost) never a good reason to use `dangerouslySetInnerHTML` - hence the name of the attribute saying *dangerous*. – nbokmans Dec 22 '21 at 13:11
  • I've tried doing that but couldn't make it work. Could you give me an example how would I receive the data, process it and return it, because on the examples I saw the data is immediately used and not processed. – Lucas Hoffmann Dec 22 '21 at 13:17

2 Answers2

1

If you want DeckTable to return a table with the props you passed on App.js (decksCompared, sideboardsCompared, decks, and headerCompared) you can just return a div with a table that uses those props inside. You shouldn't need to use innerHTML.

Gabriel Nuñez de Andrade
  • 448
  • 3
  • 8
  • But "decksCompared" is an array that I have to use a "for" to mount the table, I can't just use the values directly into a table because I don't know how many elements it will have – Lucas Hoffmann Dec 22 '21 at 13:19
  • You can use .map on decksCompared to iterate for every element on the array without knowing the size – Gabriel Nuñez de Andrade Dec 22 '21 at 13:47
  • Yeah! I finally figured it out how to do it. It's so much easier this way. Just another question, if it's no bother. How do I call a function after que DeckTable is rendered, like a jQuery component to allow drag and drop on the table rows that needs to have the table completely rendered on the screen? – Lucas Hoffmann Dec 22 '21 at 13:59
  • If you want a drag and drop table you may consider using a drag and drop library like react-dnd or react-beautiful-dnd – Gabriel Nuñez de Andrade Dec 22 '21 at 14:09
  • Yeah, I'm using "sortable" library. My doubt is, where should I call a function that affects the table created in the DeckTable component to ensure that this table already exists on the page and has values on it? For example, if I need to do something like `$('table').sortable({...});` where should I declare this code? In the app.js? index.js? decktable.js before the return? This code should be inside another function? Thanks. – Lucas Hoffmann Dec 22 '21 at 14:32
  • You can use jQuery with react as shown [here](https://stackoverflow.com/questions/38518278/how-to-use-jquery-with-reactjs), but I would not recommend it. It would be better if you used a React library to achieve this. – Gabriel Nuñez de Andrade Dec 22 '21 at 14:46
  • hmmm...I see...so I will try and do it using a react library. Thank you so much for your help. Will mark your answer as correct. – Lucas Hoffmann Dec 22 '21 at 16:02
0

It easy to use and understand for beginner

function setDangerousHtml(html, el) {
        if (el === null) return;
        const range = document.createRange();
        range.selectNodeContents(el);
        range.deleteContents();
        el.appendChild(range.createContextualFragment(html));
}

// Your function for any HTML in react


// Usage Very Simple

<div type='link' ref={setDangerousHtml.bind(null,'<YOUR HTML CODE>')}>
</div>
PetrCool
  • 111
  • 3