Table duplicating with .map (React)

  javascript, reactjs

I understand why my table is duplicating, I just can’t figure out how to move the return outside of the .map while still accessing my "columns" array. Here is my return in my functional component.

return (
    <div>
      {props.hours.map((hour, index) => {
        const columns = [
          { title: "Name", dataIndex: "name", key: `${hour.name}` },
          { title: "Date", dataIndex: "date", key: `${hour.date}` },
          { title: "Role", dataIndex: "role", key: `${hour.role}` },
          { title: "Hours", dataIndex: "hours", key: `${hour.hours}` },
          {
            title: "Action",
            dataIndex: "",
            key: `${index}`,
            render: () => (
              <div>
                <a onClick={() => deleteHours(hour)}>Delete</a>
              </div>
            ),
          },
        ];
        return (
          <div>
            <Table
              columns={columns}
              expandable={{
                expandedRowRender: (record) => (
                  <p style={{ margin: 0 }}>{record.description}</p>
                ),
                rowExpandable: (record) => record.name !== "Not Expandable",
              }}
              dataSource={props.hours}
            />
          </div>
        );

I would like 1 table, but have that table have access to the mapped array. Can anyone help out?

Source: Ask Javascript Questions

LEAVE A COMMENT