Object.entries issue

🙋Get Help
1

Hi

In some of my components I use “Object.entries” in order to manipulate the [key, value] of specific object.

The problem with this approach is that when I refresh the page or open it in a new tab, the page is not load, and I get this error:

“TypeError: key.replaceAll is not a function
at eval (webpack-internal:///./packages/atrium-theme/src/templates/inner-templates/single-property/info/table/index.js:7:994)
at Array.map ()
at Table (webpack-internal:///./packages/atrium-theme/src/templates/inner-templates/single-property/info/table/index.js:7:789)
at processChild (webpack-internal:///./node_modules/react-dom/cjs/react-dom-server.node.development.js:443:2321)
at resolve (webpack-internal:///./node_modules/react-dom/cjs/react-dom-server.node.development.js:442:122)
at ReactDOMServerRenderer.render (webpack-internal:///./node_modules/react-dom/cjs/react-dom-server.node.development.js:484:1233)
at ReactDOMServerRenderer.read (webpack-internal:///./node_modules/react-dom/cjs/react-dom-server.node.development.js:484:55)
at renderToString (webpack-internal:///./node_modules/react-dom/cjs/react-dom-server.node.development.js:528:132)
at render (webpack-internal:///./node_modules/@frontity/core/src/server/middlewares/capabilities/render-method.tsx:12:318)
at serverSideRendering (webpack-internal:///./node_modules/@frontity/core/src/server/middlewares/server-side-rendering.ts:29:15)”

This is the code snippet:

    const Table = ({table}) => {
      return (
        <table>
          <thead>
            <th>property information</th>
            <th></th>
          </thead>
          <tbody>
            {Object.entries(table).map(([key, val])) => {
              return (
                <tr key={key}>
                  <td>{key.replaceAll("_", " ")}</td>
                  <td>{value}</td>
                </tr>
              );
            }}
         </tbody>
        </table>
      )
    }

How I can handle this error ?

TNX :slight_smile:

2

Hi @dor

You seem to have an extra closing bracket on this line:

{Object.entries(table).map(([key, val])) => {

I think it should be:

{Object.entries(table).map(([key, val]) => {

Also you’re using val in one place and value in another.

{Object.entries(table).map(([key, val])) => {

then later:

<td>{value}</td>

Hope this helps.

3

I fixed the code, steel have the same issue:

const Table = ({ table }) => {
  return (
     <table>
       <thead>
          <tr>
            <th>property information</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          {Object.entries(table).map(([key, value]) => {
            return (
              <tr key={key}>
                <td>{key.replaceAll("_", " ")}</td>
                <td>
                   {value}     
                </td>
              </tr>
            );
          })}
        </tbody>
      </table>
  );
};
4

I found the bug.

I replace:

<td>{key.replaceAll("_", " " )}</td>

with:

<td>{key.replace(/_/g, " ")}</td>