ReactJS onClick without JSX

Question

I am new to React and trying to set the onClick property of a react component but get the following error:

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: <ul />. Did you accidentally export a JSX literal instead of a component?

My code is currently as follows:

// Navbar Component
class Navbar extends React.Component {

  constructor(){
    super();
    this.onItemClick = this.onItemClick.bind(this);
  };

  onItemClick () {
    console.log('Test');
  }

  render() {
    const home = React.createElement('li', {className: 'navbar-item', id: 'home'}, 'Home');
    const contact = React.createElement('li', {className: 'navbar-item', id: 'about'}, 'Contact');
    const about = React.createElement('li', {className: 'navbar-item', id: 'contact', onClick: this.onItemClick()}, 'About');

    return React.createElement('ul', {className: 'navbar'}, about, contact, home);
  }

}

var testbar = new Navbar;
ReactDOM.render(
  React.createElement(testbar.render(), null, null),
  document.getElementById('navbar')
);

Any tips on getting the onclick function to work?

giuseppedeponte · Accepted Answer · 2019-10-11 05:47:19Z

4

You just have to pass your class to ReactDOM.render method and let it handle the instance generation and rendering.

Also, you were calling your onItemClick method instead of passing it to the onClick event listener.

// Navbar Component
class Navbar extends React.Component {

  constructor() {
    super();
    this.onItemClick = this.onItemClick.bind(this);
  };

  onItemClick() {
    console.log('Test');
  }

  render() {
    const home = React.createElement('li', {
      className: 'navbar-item',
      id: 'home'
    }, 'Home');
    const contact = React.createElement('li', {
      className: 'navbar-item',
      id: 'about'
    }, 'Contact');
    const about = React.createElement('li', {
      className: 'navbar-item',
      id: 'contact',
      onClick: this.onItemClick
    }, 'About');

    return React.createElement('ul', {
      className: 'navbar'
    }, about, contact, home);
  }

}

ReactDOM.render(
  React.createElement(Navbar, null, null),
  document.getElementById('navbar')
);

<div id="navbar"></div>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

answered Oct 11, 2019 at 5:47

giuseppedeponte

2,3711 gold badge12 silver badges20 bronze badges

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

2 Comments

Age-of-Ruin Over a year ago

The navbar now displays - but it automatically prints 'test' once and then button doesn't respond?

Age-of-Ruin Over a year ago

Thank you! I had to pass the class to ReactDOM render - u da best:)

ibtsam · Accepted Answer · 2019-10-11 05:48:41Z

0

Change

const about = React.createElement('li', {className: 'navbar-item', id: 'contact', onClick: this.onItemClick()}, 'About');

to

const about = React.createElement('li', {className: 'navbar-item', id: 'contact', onClick: this.onItemClick}, 'About');

Hope it helps

answered Oct 11, 2019 at 5:48

ibtsam

1,7001 gold badge11 silver badges10 bronze badges

Collectives™ on Stack Overflow

ReactJS onClick without JSX

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related