How do I write a an If statement in a react component?

Question

I am new to react and I am using a carbon react library I am just wondering how can I put an if statement in map function.

It just writes the if statement in like it is normal string.

<StructuredListBody>
{matchingResults?.map((X, i) =>
<StructuredListRow}>
{if (X?.status.includes(Working)){
<StructuredListCell>{X?.status}</StructuredListCell>}
else 
{<StructuredListCell>{X?.checking}</StructuredListCell>}};
</StructuredListRow>
)}
</StructuredListBody>

--- additional information I simplified the code but I am looking at cant use a ternary operator because there will be more than 2 conditions.

It is more like this I still don't get how to return a specific component in a component. I am trying to change the color. The only thing that came to mind is to use the same again

    <StructuredListBody>
    {matchingResults?.map((X, i) =>
    <StructuredListRow key={`row-${row.id} -${i}`}>
    if (X?.status.includes(Working) {                                                
  <StructuredListCell key={`cell-${row.id}} noWrap style={{paddingBottom: '.5rem', color: 'red'}}>
    {X?.status}
    </StructuredListCell>}
    else 
    {<StructuredListCell key={`cell-${row.id} noWrap style={{paddingBottom: '.5rem', color: 'yellow'}}>
    {X?.status}
    </StructuredListCell>}
     )}
     </StructuredListBody>

Does this answer your question? [if-else statement inside jsx: ReactJS](https://stackoverflow.com/questions/44046037/if-else-statement-inside-jsx-reactjs) — Andy, Mar 30 '22 at 13:34
When you have an arrow function without curly brackets, everything "inside" the function is the return value. If you want to do an if and then manually return, add the curly brackets (and the return statement(s)) — James, Mar 30 '22 at 13:35

score 1 · Answer 1 · answered Mar 30 '22 at 13:42

As the only difference in rendering is the content in the StructuredListCell component. The easiest way for your case would be to use the ternary operator (?), additionally the key props need to be unique, I used the index here, but you should use something unique in your data structure.

        <StructuredListBody>
            {matchingResults.map((X, i) => (
                <StructuredListRow key={i}>
                    <StructuredListCell>{X?.status.includes(Working) ? X?.status : X?.checking}</StructuredListCell>
                </StructuredListRow>
            ))}
        </StructuredListBody>

Read more about Conditional Rendering in React

I still don't really get it when the code is written in the way it is in the additional information — Na el, Mar 30 '22 at 14:24
You can also use the ternary within the style prop, you don't necessarily need the if statement — sgck, Mar 31 '22 at 05:10

score 1 · Answer 2 · answered Jun 16 '22 at 15:24

There are a couple of ways to have if statements in the render part of a react component. You can conditionally render different components based on some logic like below:

<StructuredListBody>
    {matchingResults?.map((X, i) => {
        if (X?.status.includes(Working)) {
            return (
                <StructuredListRow>
                    <StructuredListCell>{X?.status}</StructuredListCell>
                </StructuredListRow>
            );
        } else {
            return (
                <StructuredListCell>{X?.checking}</StructuredListCell>
            );
        }
    })}
</StructuredListBody>

OR you could do the logic inside the component:


<StructuredListBody>
    {matchingResults?.map((X, i) => (
        <StructuredListCell>
            {X?.status.includes(Working) ? X?.status : X?.checking}
        </StructuredListCell>
    ))}
</StructuredListBody>

How do I write a an If statement in a react component?

2 Answers2