Why i can't use the Conditional Rendering like this?

May 4, 2023

Can someone help me?

I’m making a component in react, but I came across the "’,’ expected" error in the code below:

import React, { useState, useEffect } from 'react';
import '../styles/Listagem.css'

const Turmas = ({tipoEscolha}) => {
    
    return (
        {tipoEscolha && (
            <>
                <label htmlFor="TURMA1">Turma 1</label>
                <input type="checkbox" id="TURMA1" name="TURMAS" value="TURMA1"/>

                <label htmlFor="TURMA2">Turma 2</label>
                <input type="checkbox" id="TURMA2" name="TURMAS" value="TURMA2"/>

                <label htmlFor="TURMA3">Turma 3</label>
                <input type="checkbox" id="TURMA3" name="TURMAS" value="TURMA3"/>

                <label htmlFor="TURMA4">Turma 4</label>
                <input type="checkbox" id="TURMA4" name="TURMAS" value="TURMA4"/>

                <label htmlFor="TURMA5">Turma 5</label>
                <input type="checkbox" id="TURMA5" name="TURMAS" value="TURMA5"/>

                <label htmlFor="TURMA6">Turma 6</label>
                <input type="checkbox" id="TURMA6" name="TURMAS" value="TURMA6"/>

                <label htmlFor="TURMA7">Turma 7</label>
                <input type="checkbox" id="TURMA7" name="TURMAS" value="TURMA7"/>
            </>
        )}
    );
}
 
export default Turmas;

The error occurs in the 7th line " – tipoEscolha &&"
/
Can anyone tell what is my mistake?

>Solution :

You need to enclose your return statement in a React Fragment <>. React components must return JSX Elements, or null.

import React from 'react';
import '../styles/Listagem.css';

const Turmas = ({ tipoEscolha }) => {
  return (
    <>
      {tipoEscolha && (
        <>
          <label htmlFor="TURMA1">Turma 1</label>
          <input type="checkbox" id="TURMA1" name="TURMAS" value="TURMA1" />

          <label htmlFor="TURMA2">Turma 2</label>
          <input type="checkbox" id="TURMA2" name="TURMAS" value="TURMA2" />

          <label htmlFor="TURMA3">Turma 3</label>
          <input type="checkbox" id="TURMA3" name="TURMAS" value="TURMA3" />

          <label htmlFor="TURMA4">Turma 4</label>
          <input type="checkbox" id="TURMA4" name="TURMAS" value="TURMA4" />

          <label htmlFor="TURMA5">Turma 5</label>
          <input type="checkbox" id="TURMA5" name="TURMAS" value="TURMA5" />

          <label htmlFor="TURMA6">Turma 6</label>
          <input type="checkbox" id="TURMA6" name="TURMAS" value="TURMA6" />

          <label htmlFor="TURMA7">Turma 7</label>
          <input type="checkbox" id="TURMA7" name="TURMAS" value="TURMA7" />
        </>
      )}
    </>
  );
};

export default Turmas;