ReactJS onclick of a button display mongo collection in table format

Question

Hi I'm new to React and building few things in React and this may seem a very generic question.

I want to show a table on click of button. Below is my code.

import React from 'react';
import { Link } 
import Button from 'react-bootstrap/lib/Button';
import Panel from 'react-bootstrap/lib/Panel';
import Grid from 'react-bootstrap/lib/Grid';
import Row from 'react-bootstrap/lib/Row';
import Col from 'react-bootstrap/lib/Col';
import ButtonGroup from 'react-bootstrap/lib/ButtonGroup';
import FormGroup from 'react-bootstrap/lib/FormGroup';



this.state = {
    showSubmit: false,
};

submitForm = () => {
    window.alert('test');
} 

toggleSubmitForm = () => {
    this.setState({
        showSubmit: !this.state.showSubmit
    });
    window.alert('test2');
}

export default (props) => {

  return (
    <AppLayout title="Table Con" activeModules={props.activeModules}>
      <Protected>
        <div className="container-fluid">
          <h4>
            Welcome to the page
            !
            </h4>
        </div>
    <Button
        className="btn btn-secondary"
            bsSize="small"
            onClick={this.toggleSubmitForm}
          >
           Show Table
          </Button>

          {this.state.showSubmit && (
            <div className="container-fluid well" id="submitT">
              <form onSubmit={this.submitForm}>
                <Grid>
                  <Row>
                    <Col xs={12}>
                      <div>
                        <h3>HERE</h3>
                      </div>s
                      <br />
                      <br />
                    </Col>
                  </Row>
                </Grid>
                <Button type="submit" bsStyle="success" bsSize="large">
                  Submit
                </Button>
              </form>
            </div>
          )}
      </Protected>
    </AppLayout>
  );
};

But when onClick is called, nothing is happening.

I'm not sure where I'm failing.

Also, if i want to call a mongo collection and render the table after I click on Show Table button. What are the changes to be made ?

Answer 1

As @noitse pointed out, you are mixing statefull and stateless component features.

However, React added a new alternative if you want to keep your component as a function, Hooks. Here's what you code will look like as a hook :

import { useState } from 'react'

export default props => {
    const[showSubmit, setShowSubmit] = useState(false)

  return (
    <AppLayout title="Table Con" activeModules={props.activeModules}>
      <Protected>
        <div className="container-fluid">
          <h4>Welcome to the page !</h4>
        </div>
        <Button className="btn btn-secondary" bsSize="small" onClick={setShowSubmit(true)}>
          Show Table
        </Button>

        {showSubmit && /* Your table*/}
      </Protected>
    </AppLayout>
  );
};