I can't add a button in a table in ReactJS-CodePudding

I want to (view) button in the table but it make this error:

Module parse failed: Unexpected token < in JSON at position 165 while parsing near '...2021", "view": <button type="submit...' You may need an appropriate loader to handle this file type, currently, no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders SyntaxError: Unexpected token < in JSON at position 165 while parsing near '...2021", "view": <button type="submit...' at JSON.parse ()

This is IncomingMessagesTable.js:

import React, { useMemo } from 'react';
import { useTable } from 'react-table';
import { IncomingMessagesColumns } from './IncomingMessagesColumns';
import IncomingMessagesData from './IncomingMessagesData.json';
import '../Table.css'

export const IncomingMessagesTable = () => {
  const columns = useMemo(() => IncomingMessagesColumns, [])
  const data = useMemo(() => IncomingMessagesData, [])
  const tableInstance = useTable({
    columns,
    data
  })

  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    rows,
    prepareRow
  } = tableInstance

   return (
     <div>
          
    <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>
    </div>
  );
}
onLoadMore = () => {
  this.setState({
    usersToShow: this.state.usersToShow   1,
  });
};
export default IncomingMessagesTable;

And this is IncomingMessagesColumns.json:

    export const IncomingMessagesColumns = [
  {
    Header : "اسم المرسل",
    accessor : "senderName"
  },
  {
    Header : "نوع المرسل",
    accessor : "senderType"
  },
  {
    Header : "عنوان الرسالة",
    accessor : "messageAddress"
  },
  {
    Header : "تاريخ الرسالة",
    accessor : "dateOfMessage"
  },
  {
    Header : "قراءة",
    accessor : "view",
  
  }
]

And this is IncomingMessagesData.json:

[
  {
    "senderName": "أحمد",
    "senderType": "معلم",
    "messageAddress": "رسالة إلى أولياء أمور الطلاب",
    "dateOfMessage": "11/12/2021",
    "view": <button type="submit">عرض الرسالة</button>
  }
]

CodePudding user response：

"view": <button type="submit">عرض الرسالة</button>

This is not a valid data for JSON. You can wrap it in double quote like this

"view": "<button type="submit">عرض الرسالة</button>"

CodePudding user response：

According to the webpack documentation:

Out of the box, webpack only understands JavaScript and JSON files. Loaders allow webpack to process other types of files and convert them into valid modules that can be consumed by your application and added to the dependency graph.

So you should import the JSON file without any loader, but the error shows that you need another loader for your IncomingMessagesData.json file because the JSON file has not had a valid JSON format. You can validate your JSON object using some online websites like jsonlint

So change the IncomingMessagesData.json:

[
  {
    "senderName": "أحمد",
    "senderType": "معلم",
    "messageAddress": "رسالة إلى أولياء أمور الطلاب",
    "dateOfMessage": "11/12/2021",
    "view": "<button type='submit'> عرض الرسالة </button>"
  }
]

Note: pay attention to the quote marks in the view property, in JSON format, you need to wrap your key/value in double quote marks, so you need to change the submit marks to a single quotation mark.