0

I have this code that contain props

const Dropdown = (props: Props): React.Node => {
  const {
    name, isDisable, onChange, placeholder, value, data
  } = props;

  return (
    <Select
      onChange={onChange}
      defaultValue={valueDefiner(value)}
      styles={SelectStyle}
      placeholder={placeholder}
      name={name}
      options={data}
      isDisabled={isDisable}
    />
  );
};

it's took 3 line for only props

I have assignment to change the props into a function to simplified them, so I can import them as a function and only take 1 line for props

Ervan
  • 3
  • 2

1 Answers1

0

You can use an object notation to pass the props where key and value are the same string.

Whatever other props are extra or changed you can write them later and even override them.

const Dropdown = (props: Props): React.Node => {


  return (
    <Select {...props} isDisabled={props.isDisable}
      defaultValue={valueDefiner(props.value)}
      styles={SelectStyle}
      options={props.data}
    />
  );
};

Another way is to destructure these props in the function definition line itself.

const Dropdown = ({
    name, isDisable, onChange, placeholder, value, data
  }: Props): React.Node => {

  return (
    <Select
      onChange={onChange}
      defaultValue={valueDefiner(value)}
      styles={SelectStyle}
      placeholder={placeholder}
      name={name}
      options={data}
      isDisabled={isDisable}
    />
  );
};
Tushar Shahi
  • 16,452
  • 1
  • 18
  • 39
  • I was using that method, but my mentor don't want me to do that method – Ervan Nov 09 '22 at 07:23
  • I think writing lesser lines of code in this scenario is not what you or your mentor should be focusing on. Here you are bound by JS/React to do this. This is not some huge algorithm (or logical code) you have written which is getting too lengthy and needs to be trimmed. Your initial method and the above 2 methods I tried are both readable and standard. There is no problem in using them. Just a tip : Do not focus on writing COOL code, there is a lot more out there which requires our focus. Happy learning :D – Tushar Shahi Nov 09 '22 at 07:27