Discussion on: The Hitchhikers Guide to Refs

[Mitch Raful]

Ok, here's my question. And I can't seem to get an answer from stackoverflow unless I paste code. I have a table component. I can use refs and remove rows from it as needed. My question is, should I be removing rows (and potentially adding them back) via Refs. Or should I attempt this some other way (useContext? Redux?). (The code questions will come if it's useContext and Redux.)

[selbekk]

Hi Mitch! I’d typically avoid using refs for this sort of thing. Pass the data for each row in as an array to your table component, and work on that data set instead.

Your API could look like this:

<Table 
  rows={data} 
  onDeleteRow={removeRow} 
  onAddRow={addRow} 
/>

The Table component would then loop through the data and create the rows you need.

The addRow and removeRow functions would then change the data state variable.

[Mitch Raful]

Thanks! That seems to be the way to go so I did. And in the process, made individual components for Cells, and Rows. It allowed to further generalize and use the table in with other components.

[selbekk]

Yay!