8

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; 

5 Answers 5

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,

Submitenter image description here

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

1 Comment

...if you happen to be using react-bootstrap.
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.

7 Comments

thanks it works now , but for some reason the styling is not appearing ?
return <Button bsSize="small" onClick={this.scream}>AAAAAH!</Button>;
what do you mean by style is not appearing?
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
makes no sense, check if there is no spelling error.
|
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.

Comments

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

2 Comments

Would be interested in hearing the rationale for the downvote. This is exactly what's happening.
maybe he wanted how to do it? no reason for a downvote, will upvote you!
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; 

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.