<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone@7.14.7/babel.min.js"></script>
<script type="text/babel">
const { useState } = React;
const [contactMethod, setContactMethod] = useState('');
const [email, setEmail] = useState('');
const [phone, setPhone] = useState('');
const handleContactChange = (event) => {
setContactMethod(event.target.value);
const handleEmailChange = (event) => {
setEmail(event.target.value);
const handlePhoneChange = (event) => {
setPhone(event.target.value);
<div className='container'>
<h1>React Js Show or hide input fields based on select value</h1>
<h2>Contact Information</h2>
Preferred Contact Method:
<select value={contactMethod} onChange={handleContactChange}>
<option value="">Select an option</option>
<option value="email">Email</option>
<option value="phone">Phone</option>
<option value="none">None</option>
{contactMethod === 'email' && (
<input type="email" value={email} onChange={handleEmailChange} />
{contactMethod === 'phone' && (
<input type="tel" value={phone} onChange={handlePhoneChange} />
ReactDOM.render(<App />, document.getElementById('app'));
/* Styles for the container and button */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
/* Styling for the select element */
/* Styling for the option elements */