Я сделал компонент Dropdown.js
import React, { useState } from 'react'
import '../styles/Dropdown.css'
const Dropdown = ({selected, setSelected}) => {
const [isActiveSelect, setActiveSelect] = useState(false)
const options = ['React', 'Angular', 'Vue']
return (
<div className="Dropdown">
<div className='DropdownButton' onClick={event => setActiveSelect(!isActiveSelect)}>
<p>{selected}</p>
<span></span>
</div>
{isActiveSelect && (
<div className='DropdownContent'>
{options.map((option) => {
return <div className='DropdownItem' onClick={event => {
setSelected(option)
setActiveSelect(false)
}}>
{option}
</div>
})}
</div>
)}
</div>
)
}
export default Dropdown
И я его импортировал, скажем так в App.js.
import React, { useState } from 'react'
import '../../styles/Modal.css'
import Dropdown from '../Dropdown'
const App = ({active, setActive}) => {
const [selected, setSelected] = useState('Choose')
return (
<div className='App'>
<Dropdown selected={selected} setSelected={setSelected}></Dropdown>
</div>
)
}
export default CreateDevice
Что мне нужно сделать чтобы добавить еще один выпадающий список в компонент App, но там где у меня options.map
перебирать другой массив значений. Нужно сделать это так чтобы не писать новый компонент, а сделать Dropdown переиспользуемым.
Тоесть я хочу добавить еще один:
<Dropdown selected={selected} setSelected={setSelected}></Dropdown>
Но добавить ему еще один параметр и по нему перебирать массив.