example 3.1.1

import React, { useState } from 'react';
import ReactDOM from 'react-dom';

const App = () => {
  // State variables for different input elements
  const [textInput, setTextInput] = useState('');
  const [checkboxInput, setCheckboxInput] = useState(false);
  const [radioInput, setRadioInput] = useState('');
  const [textareaInput, setTextareaInput] = useState('');
  const [selectInput, setSelectInput] = useState('');

  return (
    <div>
      {/* Text Input */}
      <input
        type="text"
        value={textInput}
        onChange={(e) => setTextInput(e.target.value)}
        placeholder="Enter text"
      />
      <p>Text Input Value: {textInput}</p>

      {/* Checkbox Input */}
      <input
        type="checkbox"
        checked={checkboxInput}
        onChange={(e) => setCheckboxInput(e.target.checked)}
      />
      <label>Checkbox Input</label>
      <p>Checkbox Input Value: {checkboxInput ? 'Checked' : 'Unchecked'}</p>

      {/* Radio Input */}
      <div>
        <input
          type="radio"
          id="option1"
          value="option1"
          checked={radioInput === 'option1'}
          onChange={() => setRadioInput('option1')}
        />
        <label htmlFor="option1">Option 1</label>
        <br />
        <input
          type="radio"
          id="option2"
          value="option2"
          checked={radioInput === 'option2'}
          onChange={() => setRadioInput('option2')}
        />
        <label htmlFor="option2">Option 2</label>
      </div>
      <p>Radio Input Value: {radioInput}</p>

      {/* Textarea Input */}
      <textarea
        value={textareaInput}
        onChange={(e) => setTextareaInput(e.target.value)}
        placeholder="Enter text"
      />
      <p>Textarea Input Value: {textareaInput}</p>

      {/* Select Input */}
      <select
        value={selectInput}
        onChange={(e) => setSelectInput(e.target.value)}
      >
        <option value="">Select an option</option>
        <option value="option1">Option 1</option>
        <option value="option2">Option 2</option>
        <option value="option3">Option 3</option>
      </select>
      <p>Select Input Value: {selectInput}</p>
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));