Is it possible to use if..else statement in React return function()

Question

In the below snippet I want to execute if else conditional opertion in react return function. Can anyone help?

render() {
        //const { accountSummaries } = this.props;
        console.log(this.props.accountSummaries)
        return (
            <div>
                <table style={{ width: '100%' }}>
                    <thead class="account-table-header">
                        <tr>
                            <th>Heading1</th>
                            <th>Heading2</th>
                            <th>Heading3</th>
                        </tr>
                    </thead>
                    <tbody>
                        {this.props.accountSummaries.map((accountDetail) => {
                            return (<tr>
                                <td class="account-name">{accountDetail.accountBasic.name}</td>
                                <td class="account-name">{accountDetail.accountBasic.id}</td>
                                if({accountDetail.status} === 'GOOD')
                                    <td class="shape"><div class="green-oval"></div></td>
                                else if({accountDetail.status} === 'BAD')
                                    <td class="shape"><div class="red-oval"></div></td>
                            </tr>)
                    })}
                    </tbody>
                </table>
            </div >
        )
    }

I tried searching on various blogs but couldn't find my desired solution

score 3 · Answer 1 · answered Dec 16 '19 at 15:14

3

<div className={accountDetail.status === 'GOOD' ? "green-oval" : "red-oval"}>

The above would be most precise/succinct solution, in my opinion. You don't need redundant div tags. Also, I guessed you meant className instead of just class in react.

answered Dec 16 '19 at 15:14

Y M

2,105
1
22
44

Thanks.. it helped me – Aayush Chachan Dec 16 '19 at 15:49
@AayushChachan Can you accept it then. Helpful for the community reading this answer. – Y M Dec 17 '19 at 06:27

score 2 · Answer 2 · answered Dec 16 '19 at 15:10

2

if else is not allowed in return. Use ternary operators instead.

e.g if state == true ? "Yes" : "No"

{accountDetail.status === 'GOOD' ? <td class="shape"><div class="green-oval"></div></td> : <td class="shape"><div class="red-oval"></div></td>}

This should work fine.

answered Dec 16 '19 at 15:10

kooskoos

4,622
1
12
29

Thanks @kooskoos it worked – Aayush Chachan Dec 16 '19 at 15:49

score -2 · Answer 3 · answered Dec 16 '19 at 15:12

                                {accountDetail.status === 'GOOD' ?
                                    <td class="shape"><div class="green-oval"></div></td>
                                : (accountDetail.status === 'BAD' &&
                                    <td class="shape"><div class="red-oval"></div></td>
                                  )}

Is it possible to use if..else statement in React return function()

3 Answers3