PaulTenna2000 PaulTenna2000 - 4 years ago 83
Javascript Question

Javascript Reactjs button component not showing

I am trying to create a simple button component in react.

Here is the code:


import React from 'react';
import ReactDOM from 'react-dom';

class Button extends React.Component {

render() {
const {children, className, href, icon} = this.props;
const props = {href, className, ref: 'button', disabled: this.props.disabled };
const element = href ? 'a' : 'button';

return React.createElement(
element, props, icon ? <i className={this.props.icon} /> : null, children


import React from 'react';
import ReactDOM from 'react-dom';

import Button from './components/buttons';

<Button className="btn-primary">click me</Button>
<Button className="btn-success" icon="fa fa-phone">success </Button>
<Button className="btn-success" disabled={true}>disabled </Button>


<!doctype html>



<div id='root'></div>

<script src="/bundle.js"></script>

The problem I am having is that no button is showing at all.
The console is showing the following error:

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

Why is/are the button(s) not showing?

Answer Source

I think issue is in this line: <script src="/bundle.js"></script> You used a extra /, remove this it should work because same code is working properly on jsfiddle.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download