0

Я сделал компонент 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>

Но добавить ему еще один параметр и по нему перебирать массив.

1 ответ 1

1

Для этого массив значений передавай в параметры компонента, удалив константу.

То есть, вот так выглядеть будет компонент.

const Dropdown = ({options , selected, setSelected}) => {
    const [isActiveSelect, setActiveSelect] = useState(false)

    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>
    )
}

Ну и создавай теперь где хочешь любые выпадающие списки:

<div className='App'>
    <Dropdown options={['React', 'Angular', 'Vue']} selected={selected} setSelected={setSelected}></Dropdown>
    <Dropdown options={['Audio', 'BMW', 'Mercedess']} selected={selected} setSelected={setSelected}></Dropdown>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.