How to display a table in a same page click on a link?

Question

I have the main component DisplayLinks.js. In this component, while clicking on a link, I want to display a table with it in the same page. My second component is StudentListTable, in which I am adding a table with props. It doesn't show, why?

I have added my sample code here:

state = {
        visible: false,
        showTable:false
    }

    showCourseModal = () => {
        this.setState({
            visible: true,
        });
    }


    showStudentList = () => {
        this.setState({
            showtable: true,
        })

    }


    render() {
        return (
            <div align="center">
            <a href="#" onClick={this.showCourseModal}>Course</a>
            <a href="#" onClick={this.showStudentList}>StudentList</a>
                <CourseModal
                    visible={this.state.visible}
                    onOk={this.onOk}
                    onCancel={this.onCancel} />
                    <StudentListtable showtable={this.state.showTable} data={data}/>

            </div>
        )
    }

Second component:

 state = {
    showTable: this.props.showTable,
}
                render() {

                    return (
                        <div>
                            <div align="right">
                                <Button
                                    type="primary">Update</Button>
                            </div>
                            <Table
                                dataSource={this.props.data}
                                showTable={this.props.showTable}
                                columns={columns}
                                pagination={{ pageSize: 5 }}

                            />
                        </div>
                    )
                }

Answer 1

You can handle it by conditioning the inner component in the render this way:

render() {
  return (
    <div align="center">
    <a href="#" onClick={this.showCourseModal}>Course</a>
    <a href="#" onClick={this.showStudentList}>StudentList</a>
      <CourseModal
        visible={this.state.visible}
        onOk={this.onOk}
        onCancel={this.onCancel} />
        {
          this.state.showTable?
            <StudentListtable data={data}/>
          :
            <p>No tables to show</p>
        }
    </div>
  )
}