Intended function: Projects names pulled from MySQL database that are listed in table column, will be a link to /projects page listing related unique information.

What is actually happening: Project names that are pulled from MySQL database that are listed in table column, are not links.

See pics for details: https://imgur.com/a/jp1JvV0

Dashboard.js

import React, { useState, useEffect } from "react";
import { DataTable } from "primereact/datatable";
import { Column } from "primereact/column";
import { Button } from "primereact/button";
// import ButtonDemo from './ButtonDemo';
import { Chart } from "primereact/chart";
import { InputText } from "primereact/inputtext";
import { InputTextarea } from "primereact/inputtextarea";
import { Modal, ModalFooter, ModalHeader } from "react-bootstrap";
import axios from "axios";
import { useHistory, Link } from "react-router-dom";
// import { Media } from "react-bootstrap/Media"
// import ProjectsTable from "./Tables/ProjectsTable";
// import TicketsPieChart from "./Tables/TicketsPieChart"
// import API from

//project table
//eslint-disable no-unused-vars
const TableDemo = () => {
    // const toggle = () => {setShow(!show);}
    const [project_name, setProjectName] = useState("");
    const [description, setDescription] = useState("");
    const [projects, setProjects] = useState([]);
    const history = useHistory();

    useEffect(() => {
        getProjects();
    }, []);

    const getProjects = async () => {
        const response = await axios.get("http://localhost:5002/bugtracker_table");
        setProjects(response.data);
    };

    const saveProject = async (e) => {
        e.preventDefault();
        await axios.post("http://localhost:5002/bugtracker_table", {
            project_name: project_name,
            description: description,
        });
        history.push("/");
    };

    const [show, setShow] = useState(false);
    const handleClose = () => setShow(false);
    const handleShow = () => setShow(true);
    return (
        <>
            <div className="grid table-demo">
                <div className="col-12">
                    <div className="card">
                        <h5>Projects</h5>

                        <div>
                            <Button label="New Project" className="p-button-rounded mr-2 mb-2 npbutton" onClick={handleShow} />
                        </div>
                        <Modal className="modal" show={show} onHide={handleClose}>
                            <form onSubmit={saveProject}>
                                <div className="grid p-fluid">
                                    <div className="col-12 md:col-6">
                                        <div className="card">
                                            <ModalHeader>
                                                <h5>Projects</h5>
                                            </ModalHeader>
                                            <div className="grid formgrid">
                                                <div className="col-12 mb-2 lg:col-4 lg:mb-0">
                                                    <InputText value={project_name} onChange={(e) => setProjectName(e.target.value)} type="text" placeholder="Enter project name"></InputText>
                                                </div>
                                            </div>
                                            <h5>Project Description</h5>
                                            <InputTextarea value={description} onChange={(e) => setDescription(e.target.value)} type="text" placeholder="Enter project description" autoResize rows="3" cols="30" />
                                            <ModalFooter>
                                                <Button label="Submit" className="p-button-rounded p-button-success mr-2 mb-2" />
                                                <Button onClick={handleClose}>Close</Button>
                                            </ModalFooter>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </Modal>

                        {/* // <Link to="/ticketlist"  className="col-12"> */}
                        <div>
                            {/* // className="card"></Link> */}
                            <DataTable
                                // sortMode="single" sortField="representative.name"
                                value={projects}
                                sortOrder={1}
                                scrollable
                                scrollHeight="400px"
                                responsiveLayout="scroll"
                            >
                                <Column field="project_name" header="Project Name" style={{ minWidth: "200px" }}></Column>
                                {/* <Column field="ticket_title" header="Ticket Title" style={{ minWidth: "200px" }}></Column> */}
                                <Column field="description" header="Description" style={{ minWidth: "350px" }}></Column>
                                <Column field="status" header="Status" style={{ minWidth: "200" }}></Column>
                                <Column field="createdAt" header="Date" style={{ minWidth: "200px" }}></Column>

                                {projects.map((project, index) => (
                                    <tr key={project.id}>
                                        <td>{index   1}</td>
                                        <td>
                                            <Link to={`/projects/${project.id}`}>{project.project_name}</Link>
                                        </td>
                                        <td>{project.description}</td>
                                        <td>{project.createdAt}</td>\{" "}
                                    </tr>
                                ))}
                            </DataTable>
                        </div>
                    </div>
                </div>

                <div className="grid p-fluid">
                    <div className="col-12 lg:col-6">
                        <div className="card flex flex-column align-items-center">
                            <h5>Tickets by Type</h5>
                            <Chart type="pie" focus={"type"} />
                        </div>
                    </div>
                </div>

                <div className="grid p-fluid">
                    <div className="col-12 lg:col-6">
                        <div className="card flex flex-column align-items-center">
                            <h5>Tickets by Priority</h5>
                            <Chart type="pie" focus={"priority"} />
                        </div>
                    </div>
                </div>

                <div className="grid p-fluid">
                    <div className="col-12 lg:col-6">
                        <div className="card flex flex-column align-items-center">
                            <h5>Tickets by Status</h5>
                            <Chart type="pie" focus={"status"} />
                        </div>
                    </div>
                </div>
            </div>
        </>
    );
};
export default React.memo(TableDemo);

CodePudding user response：

You could do a map to the projects array into a new variable before passing it to the Datatable value parameter

const projectsToShow = projects.map(project => {
    return {
        ...project,
        project_name:  <Link to={`/projects/${project.id}`}>{project.project_name}</Link>
    }    
})

then the DataTable can handle the display with projectsToShow instead of project

 <DataTable
           ...
            value={projectsToShow}
           ...
        >