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:

//buttons.js

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
);
}
}

//index.js

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

import Button from './components/buttons';

ReactDOM.render(
<div>
<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>
</div>,
document.getElementById('root')
);

//index.html

<!doctype html>
<html>
<head>

<title></title>

</head>
<body>

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

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


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.

https://jsfiddle.net/5469dwwc/

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