DropDown - MukeshKumar101/IPL_Auction GitHub Wiki

Heading

• Drop Down Component

• @param - props

• props contain id, value, onChange, option, isPlaceholderHidden

• sample props

const id = "role";
const value = "Batsman";
const onChange = onRoleChange();
const options = [Batsman, Bowler, Wicket-Keeper,All-Rounder]
const isPlaceholderHidden= {true}

• sample usage

< DropDown
   id={id} 
   value={value}
   onChange= {onChange} 
   option={options} 
   isPlaceholderHidden={isPlaceholderHidden}
/> 

Problem Statement

To prepare to drop down component

Jobs to Done

• Create Component DropDown
• Destructure props
• Get destructured props and set props

Implementation Plan

Create Component DropDown

• Create dropDown.component.js
• Create DropDown component
• Pass props to that component

Destructure props

• Properties id,value, onChange, option, isPlaceholderHidden are assinged to props const { id, value, onChange, option, isPlaceholderHidden } = props;

Get props and set props

• Set values to select and option-tag from destructured props in return()

• Set props id, value, onChange to select

• If length is not equal to zero, then map each data to using map() and add a key to each option

• If length is equal to zero, then show the option like 'No data found'

• Export the DropDown component