Поместите ссылку в JSON с помощью крючка (React)

Question

У меня есть вопрос, я хочу добавить эту командную строку:

Cell: ({ row }) => <a href={row.original.lastName}>{row.original.lastName}</a>

в 'lastName', используя hook inactjs, например:

До:

const [columns, setColumns] = useState(
[
  {
    id:'firstName',   
    Header: 'First Name',
    accessor: 'firstName',
  },

  {
    Header: 'Last Name',
    accessor: 'lastName',
   },
]
);

setColumns(???) 

Результат:

[
   {
     id:'firstName',   
     Header: 'First Name',
     accessor: 'firstName',
   },

   {
     Header: 'Last Name',
     accessor: 'lastName',
     Cell: ({ row }) => <a href={row.original.lastName}>{row.original.lastName}</a>
    },
 ]

С наилучшими пожеланиями, Джузеппе

Answer 1

Пожалуйста, найдите небольшое рабочее решение, как показано ниже. Пожалуйста, не стесняйтесь заменить нажатие кнопки своим побочным эффектом, который может быть вызовом API или любым побочным эффектом действия. Просто для простоты я использовал кнопку.

import React, { useState } from "react";
import ReactDOM from "react-dom";

const Row = ({ row }) => (
  <a href={row.original.lastName}>{row.original.lastName}</a>
);

function App() {
  const [columns, setColumns] = useState([
    {
      id: "firstName",
      Header: "First Name",
      accessor: "firstName"
    },

    {
      Header: "Last Name",
      accessor: "lastName"
    }
  ]);

  const createRowsForLastName = () => {
    const replaceColumnForLastName = columns.map(column => {
      if (column.accessor === "lastName") {
        return {
          ...column,
          Cell: <Row row={{ original: { lastName: "some name" } }} />
        };
      }

      return { ...column };
    });

    setColumns(replaceColumnForLastName);
  };

  console.log(columns);
  return (
    <div className="App">
      <button onClick={createRowsForLastName}>Create Row!</button>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);