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
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'),
(5, 'American Samoa'),
(6, 'Andorra'),
(7, 'Angola'),
(8, 'Anguilla'),
(9, 'Antarctica');
ALTER TABLE `country`
ADD PRIMARY KEY (`id`);
ALTER TABLE `country`
MODIFY `id` int(6) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=10;
//src/index.js import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; import 'bootstrap/dist/css/bootstrap.min.css' 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([]);
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;
alert(getcoutryid)
event.preventDefault();
}
return (
<div className="container">
<div className="row">
<div className="col-sm-12">
<h5 className="mt-4 mb-4 fw-bold">ReactJS Dropdown List all Country with PHP Mysqli </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>
</div>
</div>
</div>
);
}
export default Country;
country.php
//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();
