Install bootstrap
npm install react-bootstrap bootstrap@5.1.3
C:\reactdev\myreactdev>npm install react-bootstrap bootstrap@5.1.3
https://react-bootstrap.github.io/getting-started/introduction/
run
C:\reactdev\myreactdev>npm start
Database Table
CREATE TABLE `country` (
`id` int(6) NOT NULL,
`country` varchar(250) NOT NULL DEFAULT ''
) ENGINE=MyISAM DEFAULT CHARSET=latin1;
INSERT INTO `country` (`id`, `country`) VALUES
(1, 'Afghanistan'),
(2, 'Aringland Islands'),
(3, 'Albania'),
(4, 'Algeria'),
(171, 'Philippines'),
(226, 'United Kingdom'),
(227, 'United States of America'),
(228, 'Uruguay');
ALTER TABLE `country`
ADD PRIMARY KEY (`id`);
ALTER TABLE `country`
MODIFY `id` int(6) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=243;
CREATE TABLE `state` (
`id` int(11) NOT NULL,
`name` varchar(150) NOT NULL,
`country_id` int(11) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
INSERT INTO `state` (`id`, `name`, `country_id`) VALUES
(1, 'ARMM', 171),
(2, 'Bicol', 171),
(3, 'Central Luzon', 171),
(4, 'Central Mindanao', 171),
(5, 'Alabama', 227),
(6, 'Alaska', 227),
(7, 'Arizona', 227),
(8, 'California', 227),
(9, 'Florida', 227);
ALTER TABLE `state`
ADD PRIMARY KEY (`id`);
ALTER TABLE `state`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=10;
src/index.js
//src/index.js import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; import 'bootstrap/dist/css/bootstrap.min.css' import 'bootstrap/dist/js/bootstrap.min.js' ReactDOM.render(public/index.html, document.getElementById('root') )
//public/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>ReactJS </title>
</head>
<body>
<div id="root"></div>
</body>
</html>
src/App.js
//src/App.js
import React, { useState, useEffect } from "react";
function Country() {
const [country, setCountry]= useState([]);
const [countryid, setCountryid]= useState('');
const [stetes, setSat]= useState([]);
useEffect( ()=>{
const getcountry= async ()=>{
const req= await fetch("http://localhost/devtest/reactjs/country.php");
const getres= await req.json();
console.log(getres);
setCountry(await getres);
}
getcountry();
},[]);
const handlecountry=(event)=>{
const getcoutryid= event.target.value;
setCountryid(getcoutryid);
event.preventDefault();
}
useEffect( ()=>{
const getstate= async ()=>{
const resstate= await fetch(`http://localhost/devtest/reactjs/state.php?id=${countryid }`);
const getst= resstate.json();
console.log(getst);
setSat(await getst);
}
getstate();
},[countryid]);
return (
<div className="container">
<div className="row">
<div className="col-sm-12">
<h5 className="mt-4 mb-4 fw-bold">ReactJs PHP Mysqli Select Country State Dropdown Select Box</h5>
<div className="row mb-3">
<div className="form-group col-md-4">
<label className="mb-2">Country</label>
<select name="country" className="form-select" onChange={(e)=>handlecountry(e)}>
<option>--Select Country--</option>
{
country.map( (getcon)=>(
<option key={getcon.id} value={getcon.id }> { getcon.country}</option>
))
}
</select>
</div>
<div className="form-group col-md-4">
<label className="mb-2">State</label>
<select name="state" className="form-select">
<option>--Select State--</option>
{
stetes.map( (st,index)=>(
<option key={index} value={st.id}>{ st.name}</option>
))
}
</select>
</div>
<div className="form-group col-md-2 mt-4">
<button className="btn btn-success mt-2" >Submit</button>
</div>
</div>
</div>
</div>
</div>
);
}
export default Country;
country.php http://localhost/devtest/reactjs/country.php
//country.php http://localhost/devtest/reactjs/country.php
<?php
header("Access-Control-Allow-Origin: *"); //add this CORS header to enable any domain to send HTTP requests to these endpoints:
$host = "localhost";
$user = "root";
$password = "";
$dbname = "testingdb";
$con = mysqli_connect($host, $user, $password,$dbname);
$method = $_SERVER['REQUEST_METHOD'];
if (!$con) {
die("Connection failed: " . mysqli_connect_error());
}
switch ($method) {
case 'GET':
$sql = "select * from country";
break;
}
// run SQL statement
$result = mysqli_query($con,$sql);
// die if SQL statement failed
if (!$result) {
http_response_code(404);
die(mysqli_error($con));
}
if ($method == 'GET') {
echo '[';
for ($i=0 ; $i<mysqli_num_rows($result) ; $i++) {
echo ($i>0?',':'').json_encode(mysqli_fetch_object($result));
}
echo ']';
}else {
echo mysqli_affected_rows($con);
}
$con->close();
state.php http://localhost/devtest/reactjs/state.php?id=171
//state.php http://localhost/devtest/reactjs/state.php?id=171
<?php
header("Access-Control-Allow-Origin: *"); //add this CORS header to enable any domain to send HTTP requests to these endpoints:
$host = "localhost";
$user = "root";
$password = "";
$dbname = "testingdb";
$con = mysqli_connect($host, $user, $password,$dbname);
$method = $_SERVER['REQUEST_METHOD'];
if (!$con) {
die("Connection failed: " . mysqli_connect_error());
}
switch ($method) {
case 'GET':
if(isset($_GET["id"])){
$id = $_GET['id'];
}
$sql = "select * from state".($id?" where country_id=$id":'');
break;
}
// run SQL statement
$result = mysqli_query($con,$sql);
if (!$result) {
http_response_code(404);
die(mysqli_error($con));
}
if ($method == 'GET') {
$total = mysqli_num_rows($result);
if ($total <= 0) {
echo '[';
$arr = array('id' => "0", 'name' => "No Record Found");
echo json_encode($arr);
echo ']';
}else{
echo '[';
for ($i=0 ; $i<mysqli_num_rows($result) ; $i++) {
echo ($i>0?',':'').json_encode(mysqli_fetch_object($result));
}
echo ']';
}
}else {
echo mysqli_affected_rows($con);
}
$con->close();
