CODEWITHSUNDEEP
javascriptreactjs
devanya
devanya

Reputation: 167

how to display the table using react js

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;

Upvotes: 1

Views: 2265

Answers (1)

Mayank Shukla
Mayank Shukla

Reputation: 104369

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'/>

Upvotes: 2

Related Questions