This is my code

const Input = props => {
  return (
    <React.Fragment>
      <label>{props.label}</label>
      <input 
        className="input" 
        type={props.type} 
        placeholder={props.placeholder}
      ></input>
    </React.Fragment>
  );
};

I want to receive data from an other component from my app. But it only works with a other line of code after the first props call:

    const Input = (props: { label: boolean | React.ReactChild | React.ReactFragment | React.ReactPortal | null | undefined; type: string | (string & {}) | undefined; placeholder: string | undefined; }) => {
  return (
    <React.Fragment>
      <label>{props.label}</label>
      <input 
        className="input" 
        type={props.type} 
        placeholder={props.placeholder}
      ></input>
    </React.Fragment>
  );
};

Is there a way to make this code look more beautiful?

Thank you!

CodePudding user response：

I'm assuming your frustrated on the looks of the part where you have to declare the types of the input field.

const Input = (props: { label: boolean | React.ReactChild | React.ReactFragment | React.ReactPortal | null | undefined; type: string | (string & {}) | undefined; placeholder: string | undefined; }) => {

What I would do If I was you is above your functional component is create a new Typescript Type called InputProps and set it to that so your new code would look like:

// new stuff here
type InputProps = {
  label: boolean | React.ReactChild | React.ReactFragment | React.ReactPortal | null | undefined;
  type: type: string | (string & {}) | undefined;
  placeholder: string | undefined;
}

    const Input = (props: InputProps) => {
  return (
    <React.Fragment>
      <label>{props.label}</label>
      <input 
        className="input" 
        type={props.type} 
        placeholder={props.placeholder}
      ></input>
    </React.Fragment>
  );
};

This would be the best way to tidy up this code by not having the type definitions in your function, but as a separate type object.