どのようにこのJSXをコンパクトにすることができますか？

Question

{ 
    this.state.isLoadingInputDropDown && 
    <option value="-1" disabled >Loading...</option > 
} 

{/* TODO : was not able to combine below statements */} 
{ 
    !this.state.isLoadingInputDropDown 
    && <option value="-1" >--Select a Accessorial Charge first --</option> 
} 
{            
    !this.state.isLoadingInputDropDown 
    && this.state.allInputs.length > 0 
    && this.state.allInputs.map(
    (input) => (<option value={input.id} key={input.id}>{input.name}</option>) 
) 
} 

このJSX one-linerなどをコンパクトにしようとしています。 考えられる（考えられる）構造を試しました

Answer 1

おそらくjsxを返す前に内容を宣言しているかもしれません。

const dropdown = this.state.isLoadingInputDropDown ? <option value="-1" disabled >Loading...</option > : <option value="-1" >--Select a Accessorial Charge first --</option>; 

const otherOptions = this.state.isLoadingInputDropDown || !(this.state.allInputs.length > 0) ? null : this.state.allInputs.map(
    (input) => (<option value={input.id} key={input.id}>{input.name}</option>) 
); 

return (
    <select> 
     { dropdown } 
     { otherOptions } 
    </select> 
); 

Answer 2

このようなことができます。 this.state.allInputs.length > 0チェックは必要ありません

let options; 

if (this.state.isLoadingInputDropDown) { 
    const defaultOption = <option value="-1" disabled >Loading...</option>; 
    options = [defaultOption]; 
} else { 
    const defaultOption = <option value="-1" >--Select a Accessorial Charge first --</option>; 
    const choices = this.state.allInputs.map(
     (input) => (<option value={input.id} key={input.id}>{input.name}</option>) 
    ) 
    options = [defaultOption, ...choices]; 
} 

return (
    <select> 
     {options} 
    </select> 
); 

：

return (
    <select> 
     {this.state.isLoadingInputDropDown 
      ? <option value="-1" disabled >Loading...</option> 
      : [{ id: -1, name: '--Select a Accessorial Charge first --'}, ...this.state.allInputs].map(
       (input) => (<option value={input.id} key={input.id}>{input.name}</option>) 
      )} 
    </select> 
) 

Answer 3

は理想的には、二つの部分に全体の機能を分割します。

これをワンライナーにしないでください。コードの長さは重要ではありません。重要なのは、読みやすくすることです。実際には、このコードを複数の関数に分割することを検討する必要があります。