We Keep Coding

Conditional Rendering in ReactJs for one part in Html

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
</>
)
};

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

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>
</>
);
};

you can use conditional (ternary) operator
return (
<>
{ test === true ? (<div> 10 lines</div>) : null }
<div> 500 lines</div>
</>
)

I think just doing it like this should do it -
return (
<>
{test? <div> 10 lines</div> : null}
<div> 500 lines which are common</div>
</>
);

problem mixing material-ui elements and code in react javascript

I constantly have issues trying to use code and material-ui elements in react jsx code. Here's a code snippet:
const icols = 0;
const makeTableRow = (
x,
i,
formColumns,
handleRemove,
handleSelect) =>
<TableRow key={`tr-${i}`}>
{formColumns.map((y, k) => (
y.displayColumn ? (<TableCell key={`trc-${k}`}>{x[y.name]}</TableCell>) : null), <-comma added for next line
y.displayColumn ? (cols+=1) : null)
)}
<TableCell>
<IconButton onClick={() => handleSelect(i)} ><EditIcon fontSize='small'/></IconButton>
<IconButton onClick={() => handleRemove(i)} ><DeleteForeverIcon fontSize='small' /></IconButton>
</TableCell>
</TableRow>
I am getting a jsx parsing error, when I add this line above:
y.displayColumn ? (cols+=1) : null)
If I remove the comma at the EOL above it, I still get an error. Basically I can't get a map to exec more than one statement.
If I take out the line and the EOL comma above it, everything works but I don't get a displayed column count, which I require.
I've tried using simple if/else which I am more comfortable with, but I have NEVER been able to get if/else to work in a jsx function. I want to only create a tablecell for a column w/displayColumn flag set to true, and I want a total count of the displayed columns, so I can use it later on (cols).
Is there a way to accomplish this with an if/else statement? Then I can have more than 1 statement in the if clause. The ternary operator only allows 1 statement, and I can't find anywhere what maps limitations are.
Thanks in advance for your help!

You can do something like this. You can open the open the arrow function body in map and put return JSX and do the cols increment there. Instead of having two ternary operator checks for the same condition, we can have just one conditional statement.
<TableRow key={`tr-${i}`}>
{
formColumns.map((y, k) => {
if (y.displayColumn) {
cols += 1;
return <TableCell key={`trc-${k}`}>{x[y.name]}</TableCell>
}
return null
})
}
<TableCell>
<IconButton onClick={() => handleSelect(i)} ><EditIcon fontSize='small'/></IconButton>
<IconButton onClick={() => handleRemove(i)} ><DeleteForeverIcon fontSize='small' /></IconButton>
</TableCell>
</TableRow>

Basically I can't get a map to exec more than one statement.
You can't execute more than one expression inside a arrow function definition, instead use regular declarated functions
{formColumns.map((y, k) => {
y.displayColumn ? (cols+=1) : null;
// Return what you want to render
return y.displayColumn ? (<TableCell key={`trc-${k}`}>{x[y.name]}</TableCell>) : null
}}
There are only two types of arrow function
arrow_function = () => "i will be returned"
// This way you declare only one expression after the arrow and it is returned
and
arrow_function = () => {
// This is a regular logic function
text = "i will be" + " returned";
return text;
}
EDIT 1: Add conditionals between JSX
There are two ways i know to do it
const App = () => {
return (
<div>
<h2>First form</h2>
<FirstForm true={true} />
<hr />
<h2>Second form</h2>
<SecondForm true={false} />
</div>
)
}
const FirstForm = props => {
// This way is just a ternary conditional
return (
<div>
{props.true
? <span className="success">True condition matched</span>
: <span className="danger">False condition matched</span>
}
</div>
)
}
const SecondForm = props => {
// This way uses a anonymous function executed in runtime
return (
<div>
{(() => {
let message = "Hello";
message += " World, from an auto executed anonymous function";
return (
<span className={props.true?"success":"danger"}>{message}</span>
)
})()}
</div>
)
}
ReactDOM.render(
<App />,
document.getElementById("react")
);
.success {
color: darkgreen;
}
.danger {
color: #5e181b;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="react"></div>

Ok psiro, so I looked at your examples, which all work in your situation. However, as soon as I apply one to my scenario, I still get a syntax error. Like here:
<TableBody>
{(() => {
console.log('data = ' + JSON.Stringify(data, null, 2) + '.'));
return ((data.length > 0) ? (
data.map((x, i) => row(
x,
i,
formColumns,
handleRemove,
handleSelect,
editIdx
))) : (<TableRow><TableCell colSpan={`${cols}`}>No Data</TableCell></TableRow>) )
})()}
</TableBody>
And this is the problem I have w/anonymous functions. They create unmaintainable code. I am not doing anything different than your example. Just TWO js statements inside the code you presented. Your code works, mine returns a syntax error.
And why do I even NEED a double-anonymous function to have 2 simple js statements inside an if statement? Why does your code work, and mine not?
Addendum:
Ok, so I made some inferences based on your code and realized I had added yet ANOTHER anonymous function (the map statement) into the code. I reworked it into this, which compiled:
{(() => {
console.log('data = ' + JSON.Stringify(data, null, 2) + '.');
if (data.length > 0) {
return (data.map((x, i) => row(x, i, formColumns, handleRemove, handleSelect, editIdx)))
}
return(<TableRow><TableCell colSpan={`${cols}`}>No Data</TableCell></TableRow>)
})()}
The fact that it looks completely unmaintainable is irrelevant I guess. But it doesn't matter because it STILL doesn't work! Now I get a 'JSON.stringify is not a function' at runtime, which is ridiculous of course. Why can't I get a simple console.log to work in reactjs?
ADDENDUM:
Ok, I fixed the issue thanks to all the help. For anyone else that has an issue w/multiple statements inside an anonymous function, if you want to do it, you need to add a return statement so the function knows what result to return.
<TableBody>
{(() => {
console.log('data = ' + data + '.');
if (data.length > 0) {
return (data.map((x, i) => row(x, i, formColumns, handleRemove, handleSelect, editIdx)))
}
return(<TableRow><TableCell colSpan={`${cols}`}>No Data</TableCell></TableRow>)
})()}
</TableBody>
That includes when you have an anonymous function inside another anonymous function. Hope this helps anyone else having this problem.

React single line component

Hello I have a component which doesnt return anything. Im following a tutorial and the person is using newer syntax which confuses me a bit. The component looks like this:
const Alert = ({alerts}) => alerts !== null && alerts.length > 0 && alerts.map(alert => (<div key={alert.id} className={`alert-${alert.type}`}>{alert.msg}</div>));
I simply want to know how to write this without it being single line. So i can see what's going on. Much appreciated in advance. For as far as i am aware you always need to return something.

const Alert = ({ alerts }) => {
if (alerts !== null && alerts.length > 0) {
return alerts.map(alert => (
<div key={alert.id} className={`alert-${alert.type}`}>
{alert.msg}
</div>
));
}
return null
};
Things at play here are:
Arrow Functions
Array.Map
JSX
Template Literals
Basically its a component that takes in an alerts property (Array) as a prop (<Alert alerts={[...]} />). It checks whether the passed array is present and is not empty and then maps over it. For every item in the array, we are rendering a div containing the alert message.
Hope this helps!

Very roughly (i.e., untested):
const Alert = ({alerts}) => {
if ((alerts === null) || (alerts.length === 0)) {
return null
}
return alerts.map(alert => (
<div
key={alert.id}
className={`alert-${alert.type}`}
>
{alert.msg}
</div>
))
}

const Alert = ({alerts}) => {
if (!alerts || !alerts.length) return null
return (
<>
{alerts.map(alert => (
<div key={alert.id} className={`alert-${alert.type}`}>{alert.msg}</div>
)}
</>
)
}

I think what you are struggling with is generally the one-liner syntax, which doesn't need a return if there are no braces present.
What I mean is that this line
return alerts.map(alert => {
return (<div key={alert.id} className={`alert-${alert.type}`}>{alert.msg} </div>)
})
Would be the same as this line
return alerts.map(alert => (<div key={alert.id} className={`alert-${alert.type}`}>{alert.msg} </div>))

How would this React code look like without a template string and without a conditional (ternary) operator, but with if-else?

How would this React code look like without a template string and without a conditional (ternary) operator, but with if-else?"
I read the documentation, but I want to visually see the example on my code, and not on someone else's code.
<button className={`tablinks ${i === active ? 'active' : ''}`}
onClick={openTab}
data-index={i}
>{n.title}</button>

Well you can could define the if-else logic outside the markup. You would define it in the .map(), before returning the markup. Makes it cleaner.
.map(i){
...
let classes = "tablinks"
if(i === active){
classes = classes + " active"
}
return(
<button
className={classes}
onClick={openTab}
data-index={i}
>
{n.title}
</button>
)
}

The inside of the JSX {}s needs to be an expression, and if / else alone cannot be used in an expression context - you'll need an IIFE (or a separate named function that you invoke, or a variable name defined beforehand) instead:
<button
className={
(() => {
if (i === active) {
return 'tablinks active';
} else {
return 'tablinks';
}
})()
}
onClick={openTab}
data-index={i}
>{n.title}</button>
It's a lot uglier, and introduces a lot of syntax noise. I wouldn't recommend it.
The conditional operator here is pretty helpful, but the template literal isn't as useful - if you wanted to just remove the template literal, it would look like
<button
className={'tablinks ' + (i === active ? 'active' : '')`}
onClick={openTab}
data-index={i}
>{n.title}</button>

JavaScript do expression: if statement without else

I have a question about the proposed JavaScript do expression construct. There are many examples that show how it can be used to return a value from a conditional statement that has both if and else. Also valid for if with else if and else.
What about a conditional that has just an if clause but no else if or else? Is this valid usage of the do expression?
My use case is for conditionally displaying content in a React component. I would like to write JSX code like so, but I am not sure if it is valid:
export default function myComponent(props) {
return (
<div>
{do {
if (true) {
<p>If statement is true</p>
}
}}
<p>I am always rendered</p>
</div>
);
}
I also asked the question in this gist.

Not sure about do, also as mentioned by #Felix Kling
do expression is a stage 1 proposal, not part of ES2016 (ES7).
You can write it like this using ternary operator, and return null if condition fails:
export default function myComponent(props) {
return (
<div>
{
true?
<p>If statement is true</p>
:null
}
<p>I am always rendered</p>
</div>
);
}
Or Use && Operator:
export default function myComponent(props) {
return (
<div>
{
true && <p>If statement is true</p>
}
<p>I am always rendered</p>
</div>
);
}
Check the DOC for more details about Conditional Rendering.

Why not simply do this ? Using the Ternary operator
export default function myComponent(props) {
return (
<div>
{ true ? <p>If statement is true</p> : null }
<p>I am always rendered</p>
</div>
);
}

Here is what Babel does:
Input:
<p>
{do {
if (true) {
<a/>
}
}}
</p>
Output:
React.createElement(
"p",
null,
true ? React.createElement("a", null) : void 0
);
This makes sense to me. The return value in the implied else would be undefined.

You can do it simply, using conditioanl rendering:
{condition && jsx-element}
Example:
{relationshipStatus===RelationshipStatus.SINGLE && <ShowIAmSingleComponent />}
Whenever this relationshipStatus takes value of RelationshipStatus.SINGLE, it will render this ShowIAmSingleComponent component.
Simple as react.

Yes, it is a valid syntax to write a do expression without an else and it will return an undefined (void 0).
let a = do {
if (false) true
}
// a === undefined
We can also return a value at the end without even using else like this:
let a = do {
if (false) true
null
}
// a === null
Especially for ReactJS, we have to return a null even using the do expression, because if it doesn't return something, the return value will be undefined which of course will error break the component rendering:
export default function myComponent(props) {
return (
<div>
{do {
if ([condition]) {
<p>If statement is true</p>
}
null
}}
<p>I am always rendered</p>
</div>
);
}
Or, use the Nullish coalescing operator ?? which will also catch undefined:
export default function myComponent(props) {
return (
<div>
{do {
if ([condition]) {
<p>If statement is true</p>
}
} ?? null}
<p>I am always rendered</p>
</div>
);
}
Other answers here suggest why bother using do expression since we can do this using the Conditional (ternary) operator ?:, and the answer is that using the ternary operator when we'll have more than one condition won't be syntactical friendly and it will lead in miss-renders and hard time understanding the logic for developers:
export default function myComponent(props) {
return (
<div>
{[condition1]
? <p>If condition1 is true</p> :
[condition2]
? <p>If condition2 is true</p> :
[condition2]
? <p>If condition3 is true</p> :
[condition4]
? <p>If condition4 is true</p> :
null
}
<p>I am always rendered</p>
</div>
);
}
and that's one of the reasons behind the proposal and existence of the do expression; it will make multiple conditional expressions syntactical friendly:
export default function myComponent(props) {
return (
<div>
{do {
if ([condition1]) <p>If condition1 is true</p>
if ([condition2]) <p>If condition2 is true</p>
if ([condition3]) <p>If condition3 is true</p>
if ([condition4]) <p>If condition4 is true</p>
} ?? null}
<p>I am always rendered</p>
</div>
);
}