InputSelectBox.jsx

// 関数コンポーネント内で state を扱えるようにするため、React を import 時に useState を読み込む
import React, { useState } from 'react'
import './App.css'


const VueForm = ({selectedValue}) => (
  <p>
    現在選択されている値：<b>{selectedValue}</b>
  </p>
)

const SelectItems = ({selectedValue, handleChange, values}) => (
  <select value={selectedValue} onChange={handleChange}>
  {
    values.map(v => 
      <option value={v.item} key={v.id}>{v.item}</option>)
  }
  </select>
)

const InputSelectBox = ({values}) => {
  const [selectedValue, setSelectedValue] = useState('HTML')

  const handleChange = (e) => {
    setSelectedValue(e.target.value)
  }

  return (
    <div className='App'>
      <VueForm  selectedValue={selectedValue} />
      <SelectItems selectedValue = {selectedValue} handleChange={handleChange} values={values}/>
    </div>
  )
}

export default function App () {
  const values = [
    {id: 1, item: "HTML"},
    {id: 2, item: "CSS"},
    {id: 3, item: "JavaScript"}
  ]  
  return <InputSelectBox values = {values}/>
}