Conditionals in React

first_version.js

function App() {
    const title:string = "Blog post";
    const loading: boolean = false;
    const showComments: boolean = true;

    let myArray: Array<Post> = [{
                                    id: 1,
                                    text: "Carlos"
                                },
                                {
                                    id: 2,
                                    text: "Zarta"
                                }
    ];

    if(loading) return <h1>Loading</h1>

  // @ts-ignore
    return (
    <div>
      <h1>{title}</h1>
      { // aqui comienza el condicional, con operador ternario }
      { //version apta para cuando se quiere mostrar un pedazo de vista u otro en virtud del valor de una variable}
        {showComments ? (
            <>
            {myArray.map((post, index)=> (
                <h1> { post.text}   </h1>
            ) )})
            </> ): ('no')}

    </div>
  );
}

export default App;

second_version

function App() {
    const title:string = "Blog post";
    const loading: boolean = false;
    const showComments: boolean = true;

    let myArray: Array<Post> = [{
                                    id: 1,
                                    text: "Carlos"
                                },
                                {
                                    id: 2,
                                    text: "Zarta"
                                }
    ];

    if(loading) return <h1>Loading</h1>

  // @ts-ignore
    return (
    <div>
      <h1>{title}</h1>
          { // aqui comienza el condicional, con operador booleano && }
      { //version apta para cuando se quiere mostrar un pedazo de vista unicamente en virtud del valor de una variable}
        {showComments && (
            <>
            {myArray.map((post, index)=> (
                <h1> { post.text}   </h1>
            ) )})
            </> )}

    </div>
  );
}

export default App;

third_version.js

function App() {
    const title:string = "Blog post";
    const loading: boolean = false;
    const showComments: boolean = false;


    let myArray: Array<Post> = [{
                                    id: 1,
                                    text: "Carlos"
                                },
                                {
                                    id: 2,
                                    text: "Zarta"
                                }
    ];

    const commentBlock = (
        <>
            {myArray.map((post, index)=> (
                <h1> { post.text}   </h1>
            ) )})
        </> )

    if(loading) return <h1>Loading</h1>

  // @ts-ignore
    return (
    <div>
      <h1>{title}</h1>
        {showComments && commentBlock }

    </div>
  );
}

export default App;