Display class content after clicking on a button reactjs - html

Question

I am using reactjs, and I have two classes Table and APP each one is in an individual file(Table.js and App.js); in my App.js I wrote an html code where I have a button after clicking on that button I want to display Table content which is inside a render. I tried doing: <Button onClick={<Table/>}, but it doesn't work. Any suggestions?
import React, { Component } from 'react'
import './Table.css'
class Table extends Component {
constructor(props) {
super(props)
this.state = {
Offers: [
{ name: 'Name1', website: 25 },
{ name: 'Name2', website: 19},
{ name: 'Name3', website: 16},
{ name: 'Name4', website: 25}
],
}
}
renderTableHeader() {
let header = Object.keys(this.state.Offers[0])
return header.map((key, index) => {
return <th key={index}>{key.toUpperCase()}</th>
})
}
renderTableData() {
return this.state.Offers.map((offer, index) => {
const { name, website} = offer
return (
<tr >
<td>{name}</td>
<td>{website}</td>
</tr>
)
})
}
render() {
return (
<div>
<h1 id='title'>Start-ups List Table</h1>
<table id='offers'>
<tbody>
<tr>{this.renderTableHeader()}</tr>
{this.renderTableData()}
</tbody>
</table>
</div>
)
}
}
export default Table
import React, { Component} from 'react';
import {
Container, Col, Form,
FormGroup, Label, Input,
Button, Dropdown,
} from 'reactstrap';
import Axios from "axios";
import './App.css';
import Table from './Table';
class App extends Component {
render(){
return (
<div>
<div className="box">
<div className="element sourcedropdown" >
<label>Source :</label>
<select className="form-control" name="Sources" onChange={this.handleChange}>
<option selected>Select Source</option>
<option value="1">src1</option>
<option value="2">src2</option>
<option value="3">src3</option>
</select>
</div>
<div className="element Techdropdown">
<label>Technology :</label>
<select className="form-control" name="Tech" onChange= {this.handleChange}>
<option selected>Select Technology</option>
<option className="dropdown-item" value="1">tech1</option>
<option className="dropdown-item" value="2">tech2</option>
<option className="dropdown-item" value="3">tech3</option>
</select>
</div>
<div id="contrat" className="element contrat">
<label>Contract :</label>
<select className="form-control" name="Tech" onChange= {this.handleChange}>
<option selected>Select contract</option>
<option className="dropdown-item" value="1">V1</option>
<option className="dropdown-item" value="2">V2</option>
<option className="dropdown-item" value="3">V3</option>
<option className="dropdown-item" value="3">V4</option>
</select>
</div>
<div id="checkbox" className ="element checkbox">
<label check>
<input type="checkbox" onChange= {this.handleChange} />{' '}
Remote
</label>
</div>
<Button className="button" onClick={<Table/>}>Submit</Button> //here where i want to call Table
</div>
</div>
);
}
}
export default App;

Answer 1

You have placed Table rendering inside onClick method callback. The onClick is method is just a callback. You have to conditionally display Table based on a state as your are displaying other tags. You can changed the state based on Button click.
https://codesandbox.io/s/morning-hooks-ie74g?file=/src/App.js:0-2760
import React, { Component } from "react";
import {
Container,
Col,
Form,
FormGroup,
Label,
Input,
Button,
Dropdown
} from "reactstrap";
import Axios from "axios";
import Table from "./Table";
class App extends Component {
constructor (props) {
super(props);
this.state = {
displayTable: false
};
}
render () {
return (
<div>
<div className="box">
<div className="element sourcedropdown">
<label>Source :</label>
<select
className="form-control"
name="Sources"
onChange={this.handleChange}
>
<option selected>Select Source</option>
<option value="1">src1</option>
<option value="2">src2</option>
<option value="3">src3</option>
</select>
</div>
<div className="element Techdropdown">
<label>Technology :</label>
<select
className="form-control"
name="Tech"
onChange={this.handleChange}
>
<option selected>Select Technology</option>
<option className="dropdown-item" value="1">
tech1
</option>
<option className="dropdown-item" value="2">
tech2
</option>
<option className="dropdown-item" value="3">
tech3
</option>
</select>
</div>
<div id="contrat" className="element contrat">
<label>Contract :</label>
<select
className="form-control"
name="Tech"
onChange={this.handleChange}
>
<option selected>Select contract</option>
<option className="dropdown-item" value="1">
V1
</option>
<option className="dropdown-item" value="2">
V2
</option>
<option className="dropdown-item" value="3">
V3
</option>
<option className="dropdown-item" value="3">
V4
</option>
</select>
</div>
<div id="checkbox" className="element checkbox">
<label check>
<input type="checkbox" onChange={this.handleChange} /> Remote
</label>
</div>
<Button
className="button"
onClick={() => {
this.setState({ displayTable: true });
}}
>
Submit
</Button>
</div>
{this.state.displayTable ? <Table /> : ""}
</div>
);
}
}
export default App;