Conditional Rendering in ReactJs for one part in Html

Question

I want to render some part of Html only if one of the variable is true. I have seen examples where I can return the whole element but I only want a if condition on one part of the html. I only want to show with 10 lines if one of the variables is true but html with 500 lines is common. Can I do that in return function?


const getCustomers= (props) => {
useEffect(() =>{ do something...});

 return (
<>
if(test === true){
<div> 10 lines</div>
else
{
do not show this div
}
}

<div> 500 lines</div> // Common
</>

)
};

Bhojendra Rauniyar · Accepted Answer · 2020-08-14 17:57:27Z

1

Conditional rendering is only supported using ternary operator and logical and operator:

{
  something ? '10 lines' : '500 lines'
}

{
  something && '10 lines' || '500 lines'
}

if-else statements don't work inside JSX. This is because JSX is just syntactic sugar for function calls and object construction.

For further details, you may read this, and the docs

answered Aug 14, 2020 at 17:57

Bhojendra Rauniyar

86k36 gold badges179 silver badges241 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Joe Seifi · Accepted Answer · 2020-08-14 18:31:07Z

1

Try to avoid logic inside of your return statements.

You can assign your conditional output to a JSX value, and always render it.

const Customers = () => {

  const optionalDiv = test === true && <div>10 lines</div>;

  return (
    <>
      {optionalDiv}
      <div>500 lines</div>
    </>
  );
};

answered Aug 14, 2020 at 18:31

Joe Seifi

1,7451 gold badge15 silver badges17 bronze badges

1 Comment

Qui-Gon Jinn Over a year ago

I would do the same way... Best solution from my view.

sazzad · Accepted Answer · 2020-08-14 17:55:28Z

0

you can use conditional (ternary) operator

return (
 <>
  { test === true ? (<div> 10 lines</div>) : null }
  <div> 500 lines</div>
 </>

)

answered Aug 14, 2020 at 17:55

sazzad

5254 silver badges5 bronze badges

Comments

Abhishek Bhagate · Accepted Answer · 2020-08-14 17:55:38Z

0

I think just doing it like this should do it -

return (
    <>
        {test? <div> 10 lines</div> : null}
        <div> 500 lines which are common</div> 
    </>
);

answered Aug 14, 2020 at 17:55

Abhishek Bhagate

5,8063 gold badges18 silver badges33 bronze badges

Collectives™ on Stack Overflow

Conditional Rendering in ReactJs for one part in Html

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related