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>

Answer 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.

1. Not using react keywords. Things like onclick and class need to change to the react specific onClick and className to work.
2. 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.
3. 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.