Independent Dropdown Index

index.jsx

import React, { Component } 				from 'react';
import PropTypes 					from 'prop-types';

import IndependentDropdown 				from './independent-dropdown.jsx';

export default class App extends Component {
	constructor(props) {
		super(props);
		
		this.state = {
			dropdowns: {
				products: {display: false}
			}
		};
	}
	
	displayDrowdown(id) {
		const { dropdowns } = this.state;

        	dropdowns[id].display = !dropdowns[id].display;
		
		this.setState({dropdowns: dropdowns});
	}
	
	render() {
		return (
			<div className='app'>
				<header>
					<div className='indepdent-dropdown-container-example'>
						<a href='#' onClick={(e) => {e.preventDefault(); this.displayDrowdown('products')}}>
							<span>Products</span>
						</a>
						
						<IndependentDropdown
							id='dropdown'
							display={this.state.dropdowns.products.display}
							items={[...]}
							onClickOutsideAction={(id) => {this.displayDrowdown(id)}}
						/>
					</div>
				</header>
			</div>
		);
	}
}