onclick and function calling using reactjs

Question

when ever i click the student button it should call the function inside that i have called the other component, but i am getting error. what should i do to call other component by onlick .

   import React from 'react';
//import s from './style.css';
import Students from './students.js'
require('./style.scss');
class Display extends React.Component {

  function  studentfunction(){
  <Students/>
  };
  render()
  {

    return(
      <div className="container">
      {this.state.clicked ? <Students/>}
      <h1 className="dashboard">Dashboard</h1>
     <table className="table1" >
     <tbody className="tbody1" >
<tr>
    <td ><input  type="button" value="Students" onClick={this.studentfunction} /></td>
    <td> <input type="button" value="Teachers" /></td>

    <td> <input type="button" value="Inbox" /></td>
</tr>
<tr>
   <td> <input type="button" value="Holidays" /></td>
    <td> <input type="button" value="Circular" /></td>

    <td> <input type="button" value="Notifications" /></td>
    </tr>
<tr>
    <td> <input type="button" value="Events" /></td>

      <td> <input type="button" value="Gallery" /></td>

</tr>
</tbody>
    </table>

      </div>
    );
  }
}
export default Display

;

At leasts take the time to correctly format your code, it's a mess. — Eldelshell
– Eldelshell, Commented Jan 25, 2017 at 9:47

Shubham Khatri · Accepted Answer · 2017-01-25 10:50:56Z

2

What you need is not an onClick handler on the button but a Link to route to the correct component

Try and specify route for Student component

and then use

<button type="button"><Link to="/Students">Students</Link>

onClick expects a function and not a component that is why you get an error

answered Jan 25, 2017 at 10:50

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

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

Comments

Diego Faria · Accepted Answer · 2017-01-25 12:08:38Z

1

The best way is to use react-router library. I highly recommend you to follow the tutorial.

You will get something like this after setting up react-router in your app.

  <Router history={hashHistory}>
    <Route path="/" component={App}/>
    <Route path="/students" component={Students}/>
  </Router>

The next step is to use Link component from react-router.

// modules/App.js
import React from 'react'
import { Link } from 'react-router'

export default React.Component {
  render() {
    return (
      <div>
        <h1>Your App</h1>
        <ul role="nav">
          <li><Link to="/about">About</Link></li>
          <li><Link to="/students">Students</Link></li>
        </ul>
      </div>
    )
  }
}

answered Jan 25, 2017 at 12:08

Diego Faria

9,2533 gold badges29 silver badges33 bronze badges

Collectives™ on Stack Overflow

onclick and function calling using reactjs

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related