Component not rendered on button click - ReactJS

Question

I'm currently working on a react application. I've a top bar with button and I want to render Registration component to the onClick function. There's no output with the below, I'm I missing something here?

'use strict'

import React from 'react'
import Registration from 'Registration'


export default class Header extends React.Component {
  constructor (props) {
    super (props)
    this.handleClick = this.handleClick.bind(this)
  }


  handleClick () {
    <Registration />
  }

  render () {
    return (
      <div className='top-bar'>
        <div className='top-bar-left'>
          <ul className='menu'>
            <li className='menu-text'>SIS App</li>
            <li>
              <button className='button' type='button' onClick={this.handleClick}>Create Info</button>
            </li>
          </ul>
        </div>
      </div
    )
  }
}

Here is my Registration component:

'use strict'

import React, {Component} from 'react'

export default class Registration extends Component {
  render () {
    let props = this.props
    let {edit} = props
    let handleChange = props.handleChange()
    return (
      <fieldset>
        <legend>Registration</legend>
        <input name='name'
               value={props['name']}
               type='text'
               placeholder='Your Name'
               onChange={handleChange}
        />
        <input name='email'
               value={props['email']}
               type='email'
               placeholder='Email'
               onChange={handleChange}
        />
        <input name='phone'
               value={props['phone']}
               type='tel'
               pattern={PhoneNumberPattern}
               placeholder='Phone'
               onChange={handleChange}
        />
      </fieldset>
    )
  }
}

And my app.js:

'use strict'

import React from 'react'
import { render } from 'react-dom'
import Header from 'Header'

render(
  <div>
    <Header />
  </div>,
  document.getElementById('app')
)

You're not doing anything in handleClick. What exactly do you expect to happen? — Originato, May 13 '17 at 08:10
Possible duplicate of [onClick doesn't render new react component.](http://stackoverflow.com/questions/33840150/onclick-doesnt-render-new-react-component) — Ramiz Wachtler, May 13 '17 at 08:14
Go through [React JS-State and Lifecycle Doc](https://facebook.github.io/react/docs/state-and-lifecycle.html) you would understand much better how to use states and render accordingly. — Reck, May 13 '17 at 08:34

score 0 · Accepted Answer · edited May 23 '17 at 12:18

You want to render the registration component, but you are not defining any place for it to render,

import React from 'react'
import Registration from 'Registration'


export default class Header extends React.Component {
        constructor (props) {
          super (props)
          this.state = {
            registration: false
          }
          this.handleClick = this.handleClick.bind(this)
        }


        handleClick () {
          this.setState({registration: true})
        }

  render () {

    return (
      <div className='top-bar'>
            <div className='top-bar-left'>
              <ul className='menu'>
                <li className='menu-text'>SIS App</li>
                <li>
                    <button className='button' type='button' onClick={this.handleClick}>Create Info</button>
                      <li>

                </ul>
                {this.state.registration ? <Registration/>: null}
            </div>
    )
  }
}

However I suppose ideally you would want to route to your registration component whenever the button is click, your could do that using dynamic routing after defining a route for your registration component.

Refer this solution, if you wish to do it this way

score 0 · Answer 2 · answered May 13 '17 at 08:13

0

In handleClick you can change state like this this.setState({ renderRegistration: true }) and then in render function do the following

if (this.state.renderRegistration) {
    return '<Registration />';
} else {
    // your existing code
}

answered May 13 '17 at 08:13

MSekrst

109
3

Mike · Answer 3 · 2017-05-13T09:38:00.010

The only thing that your Header component will render to the screen is what's in the render function.

One approach here is to have a flag that controls whether to display the Registration component, which is controlled by the button click event.

I don't know where your registration component needs to go, but try something like this:

'use strict'

import React from 'react'
import Registration from 'Registration'


export default class Header extends React.Component {
  constructor (props) {
    super (props)
    this.state = { showRegistration: false }
    this.handleClick = this.handleClick.bind(this)
  }


  handleClick () {
    this.setState({ showRegistration: true })
  }

  render () {
    return (
      <div className='top-bar'>
        <div className='top-bar-left'>
          <ul className='menu'>
            <li className='menu-text'>SIS App</li>
              <li>
              <button className='button' type='button' onClick={this.handleClick}>Create Info</button>
               <li>
            </ul>
        </div>
        {this.state.showRegistration && <Registration />}
      </div>
    )
  }
}

score 0 · Answer 4 · answered May 13 '17 at 08:49

You have to correct two things, firstly you have to import Header correctly in main.js, as follows:

main.js

'use strict'

import React from 'react'
import { render } from 'react-dom'
import Header from './Header.jsx'

render(
  <div>
    <Header />
  </div>,
  document.getElementById('app')
)

Secondly, define and bind handleChange function you are using in Registration component and provide the area to render the same, a follows:

Header.jsx

'use strict'
import React from 'react'
import Registration from './Registration.jsx'

export default class Header extends React.Component {
        constructor (props) {
          super (props)
          this.state = { showRegistration: false }
          this.handleClick = this.handleClick.bind(this)
          this.handleChange = this.handleChange.bind(this)
        }

        handleClick(e) {
          this.setState({ showRegistration: true })
          console.log("The link was clicked");
        }

        handleChange(e) {
          console.log("handleChange was clicked");
        }

  render () {
    let registration = null;
        if (this.state.showRegistration) {
          registration = <Registration handleChange = {() => this.handleChange()}/>
        }
    return (
      <div className='top-bar'>
            <div className='top-bar-left'>
              <ul className='menu'>
                <li className='menu-text'>SIS App</li>
                <li>
                    <button className='button' type='button' onClick={this.handleClick}>Create Info</button>
                    </li>
                </ul>
            </div>
       {registration}
      </div>
    )
  }
}

Considering the layout of app, as below:

Component not rendered on button click - ReactJS

4 Answers4