OnClick in React.js when migrating from standard HTML

Question

I was trying to move a sidebar navigation component to React.js and the javascript inside the onclick is not working anymore. So the sidebar shows but nothing happens when it is clicked.

Edit: This is the code that works fine with HTML:

<div id="sidebar">
        <div class="toggle-btn" onclick="document.getElementById('sidebar').classList.toggle('active');">
            <span></span>
            <span></span>
            <span></span>
        </div>
        <ul>
            <a href="index.html" class="animsition-link">
                <li>Home</li>
            </a>

            <a href="about.html" class="animsition-link">
                <li>About</li>
            </a>

            <a href="resume.html" class="animsition-link">
                <li>Resume</li>
            </a>

            <a href="projects.html" class="animsition-link">
                <li>Projects</li>
            </a>
        </ul>

    </div>

Edit: React Snippit (part of react code showing render)

import React, { Component } from 'react';

class Header extends Component {
render() {

if(this.props.data){
  var name = this.props.data.name;
  var occupation= this.props.data.occupation;
  var description= this.props.data.description;
  var city= this.props.data.address.city;
  var networks= this.props.data.social.map(function(network){
    return <li key={network.name}><a href={network.url}><i className={network.className}></i></a></li>
  })
}

return (
  <header id="home">




  <nav id="nav-wrap">
  <div id="sidebar" ref="sidebar">
    <div class="toggle-btn" onChange={this.refs.state.active}>
      <span></span>
      <span></span>
      <span></span>
    </div>
    <ul>
      <a href="index.html" class="animsition-link">
        <li>Home</li>
      </a>

      <a href="about.html" class="animsition-link">
        <li>About</li>
      </a>

      <a href="resume.html" class="animsition-link">
        <li>Resume</li>
      </a>

      <a href="projects.html" class="animsition-link">
        <li>Projects</li>
      </a>
    </ul>

  </div>

The code within your render() method is HTML, not JSX, you need to change that. e.g. class to className, etc. Also, instead this.refs.state.active, you need to change it to something like onChange={this.handlechange} and write a handlechange() method within your Header class. The handle change() basically contains the event handling code you use in your HTML onclick function. And finally you need to register the event handler in your Header constructor. React Hangling Events has clean example on how to do it. — hcheung
– hcheung, Commented Dec 31, 2018 at 1:37

Steven Laidlaw · Accepted Answer · 2018-12-31 01:25:18Z

1

You're passing a string instead of JavaScript, and using the wrong keywords. Make sure you use the react specific terminology of onClick={} and className="".

Edit: Also it looks like you're trying to use refs incorrectly. You shouldn't need to use a ref here at all as the onChange function would be available in the react class. Hard to tell exactly what you're trying to do without all the code, though.

Second edit: Okay with your updated code I can see a bit more of what is wrong. There are a few issues you've got here and I'll try to cover them all.

Not using react keywords. Things like onclick and class need to change to the react specific onClick and className to work.
You aren't using refs correctly. Refs, in their most basic sense, are used to modify a react component after it has been mounted. I assume you're trying to call a function here, in which case since I cannot see it defined here I can only assume it was passed in as a prop. If this is true you'll need to call it using this.props.blah.
All your assignments to variables are within the scope of an if statement, so they aren't going to be available outside that scope. If you need to use them in your code you'll have to define the variables before the if block.

edited Dec 31, 2018 at 1:25

answered Dec 31, 2018 at 0:34

Steven Laidlaw

4503 silver badges11 bronze badges

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

7 Comments

Sanat Over a year ago

Thanks for your help. I changed it to onChange and it gives me errors. The navigation bar works perfectly with normal html code as shown above. I just needed help to translate it to React and activate the css i have in another file

Sanat Over a year ago

Essentially need to toggle the toggle-btn as active so the css code is activated and the side bar extends

Steven Laidlaw Over a year ago

I was assuming that code was located in the render method of a react class. If it's not you have a lot more work you'll need to do before it will work in react. You're best off either posting the whole code, or if you're new to react running through some tutorials so you can understand how it works before attempting to convert something.

Sanat Over a year ago

The website is in react and it functions fine. The sidebar shows in the header and everything is formatted fine. Its just that when it is clicked, it isnt toggled active like it is when i use the same sidebar code in a normal html website

Sanat Over a year ago

I believe the only thing that needs to be changed is the OnClick part (which you said should be onChange)

|

Collectives™ on Stack Overflow

OnClick in React.js when migrating from standard HTML

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related