Stop modal from closing on outside click

Set the modal’s backdrop to static. The modal component has a prop of backdrop, set that to backdrop=”static” <div> <Modal show={} onHide={this.handleClose} backdrop=”static”> <Modal.Header> <Modal.Title>Change Password</Modal.Title> </Modal.Header> <Modal.Body> <form className=”form-horizontal” style={{margin:0}}> <div className=”password-heading”>This is the first time you have logged in.</div> <div className=”password-heading”>Please set a new password for your account.</div> <br/> <label className=”password”>Password <input type={this.state.type} … Read more

Get file object from file Input

The more current version of this would be something like: function MyComponent(): JSX.Element { const handleFileSelected = (e: React.ChangeEvent<HTMLInputElement>): void => { const files = Array.from( console.log(“files:”, files) } return ( <input onChange={handleFileSelected} type=”file” /> ) } The attribute is found on which you can get from the onChange event. EDIT: Removed unnecessary ref … Read more

Can I use React Bootstrap with Next.js?

Yes, it is possible to use react-bootstrap in a nextjs application. One of the problems you might encounter will be in the rendering of your application if javascript is disabled in the user’s browser and you use react-bootstrap components to build your layout (see example below). Nextjs allows you to display SSG/SSR pages, users without … Read more

React – How to open PDF file as a href target blank

Place the pdf into a folder in /src. Import it like a component. Set href parameter as the imported pdf and the target = “_blank”. import React, { Component } from ‘react’; import Pdf from ‘../Documents/Document.pdf’; class Download extends Component { render() { return ( <div className = “App”> <a href = {Pdf} target = … Read more

How to get select element’s value in react-bootstrap?

it’s quite simple: on the render method you should keep an eye on the bind(this) <select onChange={this.yourChangeHandler.bind(this)}> <option value=”-1″ disabled>–</option> <option value=”1″>one</option> <option value=”2″>two</option> <option value=”3″>three</option> </select> and your handler is like: yourChangeHandler(event){ alert( }