CODEWITHSUNDEEP
javascriptreactjsjson
Batool Nassar
Batool Nassar

Reputation: 53

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

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>
  }
]

Upvotes: 2

Views: 94

Answers (1)

moshfiqrony
moshfiqrony

Reputation: 4723

"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>"

Now you can add string HTML to your code like this

<div dangerouslySetInnerHTML={{__html: '<button type="submit">عرض الرسالة</button>'}}/>

Upvotes: 1

Related Questions