how to call functional component in class based component using onClick event?

Question

i want to show my functional component in class base component but it is not working. i made simpletable component which is function based and it is showing only table with some values but i want to show it when i clicked on Show user button.

import React ,{Component} from 'react';
import Button from '@material-ui/core/Button';
import SimpleTable from "../userList/result/result";


 class ShowUser extends Component{
     constructor(props) {
         super(props);
         this.userList = this.userList.bind(this);
     }
     userList = () => {
         //console.log('You just clicked a recipe name.');
         <SimpleTable/>
   }

    render() {

         return (
             <div>

                 <Button variant="contained" color="primary" onClick={this.userList} >
                     Show User List
                 </Button>

             </div>
         );
     }


}
export default ShowUser;

Answer 1

If you're referring to the method userList then it appears that you're assuming there is an implicit return value. Because you're using curly braces you need to explicitly return from the function meaning:

const explicitReturn = () => { 134 };
explicitReturn();  <-- returns undefined

const implicitReturn = () => (134);
implicitReturn(); <-- returns 134

Answer 2

The problem lies with how you are trying to display the SimpleTable component. You are using it inside the userList function, but this is incorrect. Only use React elements inside the render method.

What you can do instead is use a state, to toggle the display of the component. Like this:

 const SimpleTable = () => ( <p>SimpleTable</p> ); class ShowUser extends React.Component { constructor(props) { super(props); this.state = {showSimpleTable: false}; this.toggle= this.toggle.bind(this); } toggle = () => { this.setState(prev => ({showSimpleTable: .prev;showSimpleTable})). } render() { return ( <div> <button variant = "contained" color = "primary" onClick={this.toggle}> Show User List </button> {this.state;showSimpleTable && <SimpleTable />} </div> ). } } ReactDOM,render(<ShowUser />. document;getElementById("app"));

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <div id="app"></div>

Answer 3

The functionality you are looking for is called Conditional Rendering . The onClick prop function is an event handler and events in react may be used to change the state of a component. That state then may be used to render the components. In normal vanilla javascript or jQuery we call a function and modify the actual DOM to manipulate the UI. But React works with a virtual DOM . You can achieve the functionality you are looking for as follows:

class ShowUser extends Component {
    constructor(props) {
        super(props)

        // This state will control whether the simple table renders or not
        this.state = {
            showTable: false
        }

        this.userList.bind(this)
    }

    // Now when this function is called it will set the state showTable to true
    // Setting the state in react re-renders the component (calls the render method again)
    userList() {
        this.setState({ showTable: true })
    }

    render() {
        const { showTable } = this.state

        return (
            <div>
                <Button variant="contained" color="primary" onClick={this.userList}>
                    Show User List
                </Button>

                {/* if showTable is true then <SimpleTable /> is rendered if falls nothing is rendered */}
                {showTable && <SimpleTable />}
            </div>
        )
    }
}

Answer 4

Why your code is not working

1. SimpleTable has to be rendered, so you need to place it inside the render method. Anything that needs to be rendered inside your component has to be placed there
2. On Click can just contain SimpleTable, it should be used to change the value of the state variable that controls if or not your component will be shown. How do you expect this to work, you are not rendering the table.

Below is how your code should look like to accomplish what you want:

import React ,{Component} from 'react';
import Button from '@material-ui/core/Button';
import SimpleTable from "../userList/result/result";


class ShowUser extends Component{
 constructor(props) {
     super(props);
     this.state = { showUserList : false }
     this.userList = this.userList.bind(this);
 }
 showUserList = () => {
     this.setState({ showUserList : true });
 }

render() {

     return (
         <div>

             <Button variant="contained" color="primary" onClick={this.showUserList} >
                 Show User List
             </Button>
         {this.state.showUserList ? <SimpleTable/> : null}

         </div>
     );
 }


}
export default ShowUser;

You can also add a hideUserList method for some other click.

Or even better a toggleUserList

this.setState({ showUserList : !this.state.showUserList});