AppDividend
Latest Code Tutorials

React Bootstrap Modal Example Tutorial

2,136

Get real time updates directly on you device, subscribe now.

React Bootstrap Modal Example Tutorial is the topic, we will discuss today. In this tutorial, we will use Bootstrap 4 and React v16. It is easy to use react with bootstrap. We will use a reactstrap library for this example as well as Laravel as a backend. I will use Axios library to send an AJAX request to the Laravel API. There are different properties used in Modal. Properties we discuss below:

Properties:

isOpen:PropTypes.bool,

autoFocus:PropTypes.bool,

centered:PropTypes.bool,

size:PropTypes.string,

toggle:PropTypes.func,

role:PropTypes.bool.

React Bootstrap Modal Example Tutorial

First, we install React Project.

Step 1: Install React js Project

Open your Terminal and Hit Following Command.

$ npx create-react-app reactjsbootstrapmodal

After creating project move to project directory and type following command to start to react server.

yarn start

Step 2: Install reactstrap and bootstrap

Change to your terminal and type following command.

yarn add bootstrap@4.0.0

Above command add the Bootstrap 4 in our Project.

yarn add reactstrap@next react@^16.0.0 react-dom@^16.0.0

It will add reactstrap in our project.

Next, we will Import Bootstrap CSS in the src  >> index.js file.

import 'bootstrap/dist/css/bootstrap.css';

Step 3: Define a React Component to create Modal

Go to the src  >> components folder and create a new file called ModalComponent.js. This file is generated for the Modal.

//ModalComponent.js
import React from 'react';
import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';

export default class ModalComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { modal: false,name: '',team :'' ,country: ''};

    this.toggle = this.toggle.bind(this);
    this.handleChangeName = this.handleChangeName.bind(this);
    this.handleChangeTeam = this.handleChangeTeam.bind(this);
    this.handleChangeCountry = this.handleChangeCountry.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  toggle() {
    this.setState({
      modal: !this.state.modal
    });
  }
  handleChangeName(event) {
    this.setState({name: event.target.value});
  }
  handleChangeTeam(event) {
    this.setState({team: event.target.value});
  }
  handleChangeCountry(event) {
    this.setState({country: event.target.value});
  }

  handleSubmit(event) {
    event.preventDefault();
     }


  render() {
    return (

        <div>
          <h1>React Bootstrap Modal Example</h1>
        <Button color="success" onClick={this.toggle}>React Modal</Button>
        <Modal isOpen={this.state.modal}>
        <form onSubmit={this.handleSubmit}>
          <ModalHeader>IPL 2018</ModalHeader>
          <ModalBody>
          <div className="row">
            <div className="form-group col-md-4">
            <label>Name:</label>
            <input type="text" value={this.state.name} onChange={this.handleChangeName} className="form-control" />
              </div>
              </div>
            <div className="row">
             <div className="form-group col-md-4">
            <label>Team:</label>
                <input type="text" value={this.state.team} onChange={this.handleChangeTeam} className="form-control" />
               </div>
              </div>
            <div className="row">
             <div className="form-group col-md-4">
              <label>Country:</label>
                <input type="text" value={this.country} onChange={this.handleChangeCountry} className="form-control" />
               </div>
              </div>
          </ModalBody>
          <ModalFooter>
            <input type="submit" value="Submit" color="primary" className="btn btn-primary" />
            <Button color="danger" onClick={this.toggle}>Cancel</Button>
          </ModalFooter>
          </form>
        </Modal>
        </div>
      
    );
  }
}

Next, we can add a component in App.js file.

//App.js

import React, { Component } from 'react';
import './App.css';
import ModalComponent from './components/ModalComponent';

class App extends Component {
  render() {
    return (
      <div className="App">
          <ModalComponent/>        
      </div>
    );
  }
}

export default App;

Step 4: Install Laravel 5.6

Install Laravel by typing following command

composer create-project --prefer-dist laravel/laravel LaravelReactModal

Step 5: Configure the database

Add database credentials in the .env file.

React Modal Tutorial

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravelreactmodal
DB_USERNAME=root
DB_PASSWORD=

Step 6: Create model and migration files

php artisan make:model FormModal -m

It will create model and migration file.

Step 7: Establish the schema in the migration file

Related Posts
1 of 14

Go to the create_form_modals_table.php file and add the schema into it.

public function up()
    {
        Schema::create('form_modals', function (Blueprint $table) {
            $table->increments('id');
            $table->string('name');
            $table->string('team');
            $table->string('country');
            $table->timestamps();
        });
    }

Step 8: Set the routes in the api.php file.

We can create a controller called FormModalController.php.

php artisan make:controller FormModalController --resource

Add following route in the api.php file.

Route::post('formmodal', 'FormModalController@store');

Code the store function inside that file.

public function store(Request $request)
    {
        $form = new FormModal();
        $form->name=$request->get('name');
        $form->team=$request->get('team');
        $form->country=$request->get('country');
        $form->save();
        return response()->json('Successfully added');

    }

Now, start the Laravel development server by type the following command.

php artisan serve

Step 9: Add axios to a component file

You need axios. Move to your terminal and type following command.

yarn add axios

We can send a request using axios. First, we can import axios Package. Add below code into a component file.

import axios from 'axios';
const form = {
      name: this.state.name,
      team: this.state.team,
      country: this.state.country
    }
    let uri = 'http://localhost:8000/api/formmodal';
    axios.post(uri, form).then((response) => {
     this.setState({
        modal: !this.state.modal
      });
    });

You can add above code into a handleSubmit event.

Final code of ModalComponent.js file looks like below.

//ModalComponent.js

import React from 'react';
import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
import axios from 'axios';

export default class ModalComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { modal: false,name: '',team :'' ,country: ''};

    this.toggle = this.toggle.bind(this);
    this.handleChangeName = this.handleChangeName.bind(this);
    this.handleChangeTeam = this.handleChangeTeam.bind(this);
    this.handleChangeCountry = this.handleChangeCountry.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  toggle() {
    this.setState({
      modal: !this.state.modal
    });
  }
  handleChangeName(event) {
    this.setState({name: event.target.value});
  }
  handleChangeTeam(event) {
    this.setState({team: event.target.value});
  }
  handleChangeCountry(event) {
    this.setState({country: event.target.value});
  }

  handleSubmit(event) {
    event.preventDefault();
    const form = {
      name: this.state.name,
      team: this.state.team,
      country: this.state.country
    }
    let uri = 'http://localhost:8000/api/formmodal';
    axios.post(uri, form).then((response) => {
     this.setState({
        modal: !this.state.modal
      });
    });
  }


  render() {
    return (

        <div>
        <h1>React Bootstrap Modal Example</h1>
        <Button color="success" onClick={this.toggle}>Open Modal</Button>
        <Modal isOpen={this.state.modal}>
        <form onSubmit={this.handleSubmit}>
          <ModalHeader>IPL 2018</ModalHeader>
          <ModalBody>
          <div className="row">
            <div className="form-group col-md-4">
            <label>Name:</label>
            <input type="text" value={this.state.name} onChange={this.handleChangeName} className="form-control" />
              </div>
              </div>
            <div className="row">
             <div className="form-group col-md-4">
            <label>Team:</label>
                <input type="text" value={this.state.team} onChange={this.handleChangeTeam} className="form-control" />
               </div>
              </div>
            <div className="row">
             <div className="form-group col-md-4">
              <label>Country:</label>
                <input type="text" value={this.country} onChange={this.handleChangeCountry} className="form-control" />
               </div>
              </div>
          </ModalBody>
          <ModalFooter>
            <input type="submit" value="Submit" color="primary" className="btn btn-primary" />
            <Button color="danger" onClick={this.toggle}>Cancel</Button>
          </ModalFooter>
          </form>
        </Modal>
        </div>
      
    );
  }
}

In above tutorial, you may meet No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:3000’ is therefore not allowed access. The response had HTTP status code 500. You will get discarded of this error by going to the Laravel 5.5 ReactJS Tutorial  The best suitable solution is there.

React Bootstrap Modal Laravel Tutorial

 

So finally, our React Bootstrap Modal Example Tutorial is over.

Leave A Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.