xxxxxxxxxx
<html>
<head>
<meta charset="UTF-8" />
<script src="https://unpkg.com/react@17.0.2/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@babel/standalone@7.14.6/babel.min.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/babel" data-presets="env,react">
const { useState } = React;
function App() {
const [result, setResult] = useState("");
const country = [
"China",
"India",
"United States",
"Indonesia",
"Pakistan",
];
const myFunction = () => {
setResult(country.indexOf("India"));
};
return (
<div className='container'>
<h2>React Js Get first index of item in array</h2>
<button onClick={myFunction} className="btn btn-primary">
Find Index of India
</button>
{result !== "" && (
<p>First Index of item in array: {result}</p>
)}
</div>
);
}
ReactDOM.render(<App />, document.getElementById("app"));
</script>
<style>
.container {
margin: 20px;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
text-align: center;
}
h2 {
font-size: 24px;
margin-bottom: 10px;
}
.btn {
padding: 10px 20px;
font-size: 16px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
.btn:hover {
background-color: #0056b3;
}
p {
margin-top: 20px;
}
</style>
</body>
</html>