OnClick event with return in function, doesn't work in react js

Question

I have a problem when I tried to load a table component with json data. I have a form as it is in the image below. The problem is at the button onClick event. Seems that when I click the button, nothing happen.

import '../css/customButton.css';
import '../css/customDropDownButton.css';
import '../css/customBoxContainer.css';
import '../css/customTableComponent.css';
import CustomTextbox from '../components/CustomFormTextBoxContainer.tsx';
import CustomButton from '../components/CustomButtonContainer.tsx';
import CustomPersonDropDownButton from '../components/CustomDropDownButton.tsx';
import JsonData from '../data/personType.json'
import {RegistrationTableHeader} from '../enums/TableValues.tsx';

export default function CreateForm(){

    const DisplayData=JsonData.map(
        (info)=>{
            return(
                <tr>
                    <td>{info.first_name}</td>
                    <td>{info.last_name}</td>
                    <td>{info.Category}</td>
                </tr>
            )
        }
    )

    const DisplayRegisterData = () => {
        return(
            <div>
                <table>
                    <thead>
                        <tr>
                        <th>{RegistrationTableHeader.first_name}</th>
                        <th>{RegistrationTableHeader.last_name}</th>
                        <th>{RegistrationTableHeader.Category}</th>
                        </tr>
                    </thead>
                    <tbody>
                    {DisplayData}
                    </tbody>
                </table>
               
            </div>
        )
    }

    return(
        <div className='containerBox'>
            <CustomTextbox
            label='First Name'
            placeholder='First Name' />
            <CustomTextbox
            label='Last Name'
            placeholder='Last Name' />
            <CustomPersonDropDownButton />
            <CustomButton
            title='Register person' onClick={DisplayRegisterData}/>
        </div>
    )
}

I tried to create a separate file/component with the code for table, and call it on a onClick event but is not working. If I separate the component and I put it off the onClick event, the component is rendering with data but I want to render here only when I click the button.

Answer 1

You are supposed to place your table data directly as part of your template, but hiding / showing it based on a state flag, see React doc about conditional rendering :

function Form() {
  const [showTable, setShowTable] = React.useState(false);

  return (
    <>
      <button onClick={() => setShowTable(true)}>Show Table</button>
      {
        // Conditionally render the table
        showTable && <table></table>
      }
    </>
  );
}

You can also separate some parts as "sub-templates", in which case you would call them as a normal function ( {DisplayRegisterData()} ), but make sure not to turn them into Components (do not use hooks inside sub-templates):

function Form() {
  const [showTable, setShowTable] = React.useState(false);

  // Sub-template
  const DisplayRegisterData = () => {
    // Do NOT use hooks here!
    return <table></table>;
  }

  return (
    <>
      <button onClick={() => setShowTable(true)}>Show Table</button>
      {
        // Conditionally render the table
        showTable && DisplayRegisterData()
      }
    </>
  );
}