3

When the user clicks the option value "apple" for example, the input field should automatically populate with today's date.

Here's my code


import "./styles.css";
import React, {useState} from "react"

export default function App() {
  const [selectedFruit, setSelectedFruit] = useState('orange')
  const [value, setValue] = useState("");

  const handleChange = (e)=>{
    if(selectedFruit === "apple"){
      setValue(new Date(e.target.value));
    }
  }
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>

      <select
      value={selectedFruit}
      onChange={e => setSelectedFruit(e.target.value)}
    >
      <option value="apple">Apple</option>
      <option value="banana">Banana</option>
      <option value="orange">Orange</option>
    </select>

    <input type="text" value={value} onChange={handleChange} />
    </div>
  );
}

I tried setting the state of the input field to match the value of the select option value

Mayank Kumar Chaudhari
  • 16,027
  • 10
  • 55
  • 122

1 Answers1

2

You need to set type to 'date' or 'datetime-local'

Mayank Kumar Chaudhari
  • 16,027
  • 10
  • 55
  • 122