'Button' is not defined react/jsx-no-undef react.js

Question

im a noob in React.js , and just messing around with components and event listeners , i am trying to Add eventlistener to button but it doesnt work for some reason... I tried to import elemental but that just gives a bunch of other errors , can somone please tell me how i can get this to work ? thanks

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



class Passiing extends React.Component {
  scream() {
    alert('you passed!');
  }

  render() {
    return <Button onClick={this.scream}>Did you pass?</Button>;
  }
}

ReactDOM.render(<Button />, document.getElementById('app'));



export default Passiing;

Johnson Samuel · Accepted Answer · 2018-05-22 15:14:18Z

13

You will need to import Button using react-bootstrap.

import { Button} from 'react-bootstrap';

In order for the style to appear, please install bootstrap and import 'bootstrap/dist/css/bootstrap.css' and add it in index.js

To use button,

Submit

answered May 22, 2018 at 15:14

Johnson Samuel

2,0862 gold badges20 silver badges33 bronze badges

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

1 Comment

Raydot Over a year ago

...if you happen to be using react-bootstrap.

Bruno Mazzardo · Accepted Answer · 2018-05-22 14:05:41Z

4

Are you trying to use react-bootstrap ? if so, add this import: import { Button } from 'react-bootstrap', if you haven't installed it yet, run these command:

$ npm install --save react react-dom
$ npm install --save react-bootstrap

if you have no intent to use use it, you have to create a component called Button yourself and import it.

answered May 22, 2018 at 14:05

Bruno Mazzardo

1,5861 gold badge15 silver badges27 bronze badges

7 Comments

Leon Bogod Over a year ago

thanks it works now , but for some reason the styling is not appearing ?

Leon Bogod Over a year ago

return <Button bsSize="small" onClick={this.scream}>AAAAAH!</Button>;

Bruno Mazzardo Over a year ago

what do you mean by style is not appearing?

Leon Bogod Over a year ago

the button is still in default form , react-bootstrap.github.io/components/buttons i m trying to make it like the buttons in the demo , but bsStyle =''primary' is not changing it

Bruno Mazzardo Over a year ago

makes no sense, check if there is no spelling error.

|

David Boland · Accepted Answer · 2020-10-06 12:39:59Z

3

You could use the HTML5 <button> tag for your button. If you use a capital letter for a tag in React it assumes that is a component rather than a "regular" tag.

answered Oct 6, 2020 at 12:39

David Boland

312 bronze badges

Comments

user5224313 · Accepted Answer · 2018-05-22 13:52:35Z

1

The problem is exactly as stated in the error. You're using a Button component that is not defined anywhere. You need to either define a Button class or import Button from somewhere (e.g. a UI library).

answered May 22, 2018 at 13:52

user5224313

2 Comments

user5224313 Over a year ago

Would be interested in hearing the rationale for the downvote. This is exactly what's happening.

Bruno Mazzardo Over a year ago

maybe he wanted how to do it? no reason for a downvote, will upvote you!

Stiliyan · Accepted Answer · 2018-05-22 14:08:32Z

0

Your code should look like that.

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



class Passiing extends React.Component {
  constructor(props) {
    super(props)
    this.scream = this.scream.bind(this);
  }
  scream() {
    alert('you passed!');
  }

  render() {
    return (
      <input type='button' value="button" onClick={this.scream} />
    );
  }
}

ReactDOM.render(<Passiing/>, document.getElementById('app'));



export default Passiing;

answered May 22, 2018 at 14:08

Stiliyan

17612 bronze badges

Collectives™ on Stack Overflow

'Button' is not defined react/jsx-no-undef react.js

5 Answers 5

1 Comment

7 Comments

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

7 Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related