<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/babel">
const { useState } = React;
const [inputValue, setInputValue] = useState(''); // State to store input value
const handleInputChange = (event) => {
setInputValue(event.target.value); // Update input value in state
const handleButtonClick = () => {
console.log('Input value:', inputValue); // Log the input value when button is clicked
<div className='container'>
<h3>React Js Get value of Input Field on Button click</h3>
<input type="text" value={inputValue} onChange={handleInputChange} />
<button onClick={handleButtonClick}>Get Value</button>
ReactDOM.render(<App />, document.getElementById('app'));
background-color: #f5f5f5;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
background-color: #007bff;
transition: background-color 0.3s ease;
background-color: #0056b3;