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>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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