Reader small image

You're reading from  ReactJS by Example - Building Modern Web Applications with React

Product typeBook
Published inApr 2016
Reading LevelIntermediate
PublisherPackt
ISBN-139781785289644
Edition1st Edition
Languages
Right arrow
Author (1)
Vipul A M
Vipul A M
author image
Vipul A M

Vipul A M is Director at BigBinary. He is part of Rails Issues Team, and helps triaging issues. His spare time is spent exploring and contributing to many Open Source ruby projects, when not dabbling with React JS. Vipul loves Ruby's vibrant community and helps in building PuneRb, is the founder of and runs RubyIndia Community Newsletter and RubyIndia Podcast, and organizes Deccan Ruby Conference in Pune. He can be found @vipulnsward on twitter and on his site http://vipulnsward.com.
Read more about Vipul A M

Right arrow

Adding a modal


"Alright, this works well," continued Mike.

"However, it's a bit clumsy right now. After the timeout, there's nothing a user can do. We can add a popup to notify the user. Instead of showing the error page, let's display a modal with an alert and redirect the user to the first page so that the user can restart the flow. We can use Bootstrap modal to achieve this."

"Got it. Want me to give it a try?" asked Shawn.

"Go ahead!"

"Let me start with setting up the modal first. I will use a simple bootstrap modal to display it. After that's done, I will need to invoke display of the modal from alertCartTimeout, I guess. I will also be setting up to display the first page and reset form data."

"Correct."

"This is how the modal will look"

import React from 'react';

var ModalAlertTimeout = React.createClass({
  render() {
    return (

      <div className="modal fade" ref='timeoutModal'>
        <div className="modal-dialog">
          <div className="modal-content">
  ...
lock icon
The rest of the page is locked
Previous PageNext Page
You have been reading a chapter from
ReactJS by Example - Building Modern Web Applications with React
Published in: Apr 2016Publisher: PacktISBN-13: 9781785289644

Author (1)

author image
Vipul A M

Vipul A M is Director at BigBinary. He is part of Rails Issues Team, and helps triaging issues. His spare time is spent exploring and contributing to many Open Source ruby projects, when not dabbling with React JS. Vipul loves Ruby's vibrant community and helps in building PuneRb, is the founder of and runs RubyIndia Community Newsletter and RubyIndia Podcast, and organizes Deccan Ruby Conference in Pune. He can be found @vipulnsward on twitter and on his site http://vipulnsward.com.
Read more about Vipul A M