Remove unwanted characters from a string in table cell

Question

I have a React table (react-table) that takes in data from an api to populate the row cells. The data looks something like this:

const data = [{id: "6666", contact_id: "1", poc_id: "2", contact: "John Doe", 
               watersheds: "{12070104,12090301,12090401}"}, {id: "6667", contact_id: "2", 
               poc_id: "3", contact: "Sally Jones", watersheds: "{12070105,12090301}"}]

There could be more or less items depending on what the API request returns. My issue is that when the Watershed column is populated with the watershed data item, it includes the { ... }s. I want it to return 12070104,12090301,12090401 in the cell, not {12070104,12090301,12090401}. I know I can use replace or some other method to remove and replace the unwanted { }s:

data.map(item => (item.watersheds.replace(/{/gi, "").replace(/}/gi, "")))

or something similar, but since I adding the data to the table dynamically, I'm not sure how to remove the { }s before they are displayed in the table? My table looks something like this:

import React from 'react'
import styled from 'styled-components'
import { useTable } from 'react-table'
import makeData from './makeData'

const Styles = styled.div`
  padding: 1rem;

  table {
    border-spacing: 0;
    border: 1px solid black;

    tr {
      :last-child {
        td {
          border-bottom: 0;
        }
      }
    }

    th,
    td {
      margin: 0;
      padding: 0.5rem;
      border-bottom: 1px solid black;
      border-right: 1px solid black;

      :last-child {
        border-right: 0;
      }
    }
  }
`

function Table({ columns, data }) {
  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    rows,
    prepareRow,
  } = useTable({
    columns,
    data,
  })

  return (
    <table {...getTableProps()}>
      <thead>
        {headerGroups.map(headerGroup => (
          <tr {...headerGroup.getHeaderGroupProps()}>
            {headerGroup.headers.map(column => (
              <th {...column.getHeaderProps()}>{column.render('Header')}</th>
            ))}
          </tr>
        ))}
      </thead>
      <tbody {...getTableBodyProps()}>
        {rows.map((row, i) => {
          prepareRow(row)
          return (
            <tr {...row.getRowProps()}>
              {row.cells.map(cell => {
                return <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
              })}
            </tr>
          )
        })}
      </tbody>
    </table>
  )
}

function App() {
  const columns = React.useMemo(
    () => [
      {
        Header: 'ID',
        accessor: 'id',
      },
      {
        Header: 'CONTACT ID',
        accessor: 'contact_id',
      },
      {
        Header: 'POC ID',
        accessor: 'age',
      },
      {
        Header: 'NAME',
        accessor: 'contact',
      },
      {
        Header: 'Watersheds',
        accessor: 'watersheds',
      }
    ], []
  )

  //const data = React.useMemo(() => makeData(20), [])
  const data = useMemo(() =>    [{id: "6666", contact_id: "1", poc_id: "2", contact: "John Doe", 
    watersheds: "{12070104,12090301,12090401}"}, {id: "6667", contact_id: "2", 
    poc_id: "3", contact: "Sally Jones", watersheds: "{12070105,12090301}"}])  

  return (
    <Styles>
      <Table columns={columns} data={data} />
    </Styles>
  )
}

export default App

Answer 1

You can render a custom content for each cell . Instead of transforming the data before passing to the table . we can just transform the value before rendering .

 {
        Header: "Watersheds",
        accessor: "watersheds",
        Cell: (props) => {
          return <p>{props.value.replace(/{/gi, "").replace(/}/gi, "")}</p>;
        }
      }

Working Sandbox

Answer 2

In your App component, right before using useMemo, you can extract that array of objects to a separate varible, iterate over watersheds and replace them with the regex that you used above. After that you can pass it to useMemo.