how to display the table using react js

Question

Im new to reactjs and Im just trying to create a page with the userName and password. When the submit is clicked it should display a list of table names in the same page. For this I have two react components, placed it in a separate js file. So when the button is clicked the table names should be generated. I have tried a sample code but I'm unable to display the list. So looking for help in reactjs.

tableContent.js

    import React from 'react';

class tableContent extends React.Component {
    render() {
        return (
            <select name="sometext" multiple="multiple">
                <option>Table1</option>
                <option>Table2</option>
                <option>Table3</option>
                <option>Table4</option>
                <option>Table5</option>
            </select>

        )
    }
}

export default tableContent;

login.js

import React from 'react';
import tableContent from './tables';
class Login extends React.Component{
    constructor(){
        super();
        this.state={
            showComponent : false,
        };
        this.buttonClick = this.buttonClick.bind(this);
    }

    buttonClick(){
        this.setState({
            showComponent: true,
        })
    }
    render(){
        return(
            <div>
                <form>
                    <label>userName :</label>
                    <input type="text" />
                    <br/>
                    <label>Password :</label>
                    <input type="text" />
                    <button onClick={this.buttonClick.bind(this)}> Submit </button>
                  </form>
                  <tableContent />
            </div>  
        )
    }
}

export default Login;

Mayank Shukla · Accepted Answer · 2017-05-03 13:14:57Z

2

Change the Name tableContent to TableContent, because name of the react component must start will upper case letter otherwise it will be treated as html element.

Use e.preventDefault(); inside buttonClick function to prevent the form submission automatically.

Check the working code:

class Login extends React.Component{
    constructor(){
        super();
        this.state={
            showComponent : false,
        };
    }

    buttonClick(e){
        e.preventDefault();
        this.setState({
            showComponent: true,
        })
    }
    render(){
        return(
            <div>
                <form>
                    <label>userName :</label>
                    <input type="text" />
                    <br/>
                    <label>Password :</label>
                    <input type="text" />
                    <button onClick={this.buttonClick.bind(this)}> Submit </button>
                  </form>
                  {this.state.showComponent && <TableContent />}
            </div>  
        )
    }
}
class TableContent extends React.Component {
    render() {
        return (
            <select name="sometext" multiple="multiple">
                <option>Table1</option>
                <option>Table2</option>
                <option>Table3</option>
                <option>Table4</option>
                <option>Table5</option>
            </select>

        )
    }
}

ReactDOM.render(<Login/>, document.getElementById('app'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id ='app'/>

edited May 3, 2017 at 13:14

answered May 3, 2017 at 12:16

Mayank Shukla

105k19 gold badges163 silver badges146 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mayank Shukla Over a year ago

check the updated answer, you need to use conditional rendering for that like this: {this.state.showComponent && <TableContent />} it will work :)

Rudhra Over a year ago

@MayankShukla what does this {this.state.showComponent && <TableContent />} in reactjs

Collectives™ on Stack Overflow

how to display the table using react js

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related