TSX child component value undefined

Question

In my application I have a table of projects that when I click on any of the rows with an "Error" status message, it should reroute the user to an ErrorsPage that gives a detailed error stacktrace about what's causing the error. Inside of my project table file, I have this function where I'm passing projectScanID to ErrorsPage as a prop:

const handleClickOnTableRow = (projectScanID: number, scanStatus: string) => {
        if (scanStatus === 'Completed') {
            history.push(`/results/${projectScanID}`);
        }

        if (scanStatus === 'Error') {
            console.log(projectScanID);
            <ErrorsPage
                project_id={projectScanID}
            />
            history.push(`/error`);
        }
    }

Notice console.log right before I pass project_id to the ErrorsPage. This console.log prints an int. Then, history.push reroutes the webpage to the ErrorsPage which looks like this:

import React, {FC} from 'react';
import {useFetchErrors} from "../Api/Api";

interface ExecutionTableProps {
  project_id: number
}

const ErrorsPage: React.FC<ExecutionTableProps> = ({project_id}) => {
    console.log(project_id)
    const errors = useFetchErrors(project_id)
    return(
        <h1>fj</h1>
    )
}
export default ErrorsPage;

It says project_id is undefined on the first line under the ErrorsPage functional component. What is causing this issue? Am I incorrectly passing project_id to ErrorsPage as a prop? All I know for sure is that it's being routed to the correct page, as it says project_id is undefined on the first line of ErrorsPage.

You never actually render `ErrorsPage` by `return`ing it. Did you mean to pass it into the `history.push`? — Samathingamajig, May 01 '22 at 05:03
you are using history.push(`/error`) for navigation to ErrorsPage, don't create — Oleg, May 01 '22 at 05:07

TSX child component value undefined

0 Answers0