Question 137136 in Reactjs Question posted in
The new location for the React Documentation can be found here.

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

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?

Tags:

2

Answers


  1. 0

    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;
    Login or Signup to reply.
  2. 0

    The problem is that the syntax of brackets in only valid inside JSX so you can write down javascript code during compilation

    Plain javascript dont know that {} syntax thats why you get an error, you could do this instead:

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

   return <></> // if tipoEscolha is false
}

    PS: This is called conditional rendering

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search