Refactor dropdown component in React

Question

I have to use multiple dropdowns from semantic-ui-react in my project. They need to have different props. It looks like this

 <div className="wrapper">
        <img className="icon" src={iconA} alt="iconA"></img>
        <h1>A</h1>
        <Dropdown
          className="dropdown"
          search
          selection
          options={optionsA}
          placeholder="A"
          defaultValue="A"
          onChange={handleAChange}
        />
 </div>
 <div className="wrapper">
        <img className="icon" src={iconB} alt="iconB"></img>
        <h1>B</h1>
        <Dropdown
          className="dropdown"
          search
          selection
          options={optionsB}
          placeholder="B"
          defaultValue="B"
          onChange={handleBChange}
        />
 </div>

I want to refactor this and create a single component for this by pasing different props. Please guide me on how this can be refactored in the best way possible.

Rohit Singh · Accepted Answer · 2020-05-11 14:41:59Z

1

First, create your custom dropDown component and extract props using object destructuring, you can give deafult values to props there itself, but better use PropTypes for that.

const CustomDropDown = (props) => {
  const { 
    className,
    search,
    selection,
    options,
    placeholder,
    defaultValue,
    onChange
  } = props;

  return (
    <div className="wrapper">
      <img className="icon" src={iconA} alt="iconA"></img>
      <h1>A</h1>
      <Dropdown
        className={classname}
        search={search}
        selection={selection}
        options={optionsA}
        placeholder={placeholder}
        defaultValue={defaultValue}
        onChange={onChange}
      />
    </div>
  )
}

Now, call the component like this,

<CustomDropDown 
  className="dropdown"
  search
  selection
  options={optionsA}
  placeholder="A"
  defaultValue="A"
  onChange={handleAChange}
/>

edited May 11, 2020 at 14:41

answered May 11, 2020 at 14:36

Rohit Singh

805 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Alexandar Mahone Over a year ago

That helps! I think you missed the the img and h1 tags in the component. They need to have different props too!

Rohit Singh Over a year ago

yes, you can pass those too from <CustomDropDown /> component, and consume it.

Alexandar Mahone Over a year ago

There is also a special case where let's say I would want another p tag within div ClassName="wrapper" but only for a specific dropdown. Would that be possible?

Rohit Singh Over a year ago

you can use flag for that, i mean pass a boolean flag as a prop and display p tag based on that

Aleksey Polonka · Accepted Answer · 2020-05-11 14:26:15Z

0

You can do it as follows:

const DropDownWraper = ({
 header,
 options,
 onChange,
 iconProps,
 placeholde,
 defaultValue
 }) =>
    <div className="wrapper">
      <img
        className="icon"
        src={ iconProps.src }
        alt={ iconProps.alt } />
      <h1>{ header }</h1>
      <Dropdown
        search
        selection
        options={ options }
        className="dropdown"
        onChange={ onChange }
        placeholder={ placeholde } 
        defaultValue={ defaultValue } />
   </div>

answered May 11, 2020 at 14:26

Aleksey Polonka

5834 silver badges10 bronze badges

2 Comments

Alexandar Mahone Over a year ago

The dropdown have different onChange functions

Aleksey Polonka Over a year ago

When you use the DropDownWraper component, you can pass handleAChange, handleBChange, etc. The same is true for everything else.

Collectives™ on Stack Overflow

Refactor dropdown component in React

2 Answers 2

4 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related