Loops inside react jsx render function with if else conditions

Question

I have data like below.

this.state.jsonData = [
        {
        category: "1",
        clientname: "rahul1",
        reporthtml: "hello1"
        },
        {
                category : "1",
                clientname: "rahul2",
                reporthtml: "hello2"
        },

        {
                category : "2",
                clientname: "rahul2",
                reporthtml: "hello2"
        },
         {
                category : "2",
                clientname: "rahul2",
                reporthtml: "hello2"
        },
        {
                category : "2",
                clientname: "rahul2",
                reporthtml: "hello2"
        },
];

Now i need to render it in react jsx like below. Not getting to make the if else to show only same category only once

My html:

<div>
<div> Category Name</div>
<div>Client Name</div>
<div>Client Html</div>
<div>Client Name</div>
<div>Client Html</div>
<div>Client Name</div>
<div>Client Html</div>
</div>
<div>
<div> Category Name</div>
<div>Client Name</div>
<div>Client Html</div>
<div>Client Name</div>
<div>Client Html</div>
<div>Client Name</div>
<div>Client Html</div>
</div>


{this.state.jsonData.map(function(category,i) {
   return <div> category.category</div>// This line will only print once for each category need if else condition
   <div>Client Name</div>
   <div>Client Html</div>  ;
})}

Use Javascript map or reducer to traverse array of object

Khalid Azam
– Khalid Azam

2017-01-22 00:45:22 +00:00
Commented Jan 22, 2017 at 0:45 — Khalid Azam
– Khalid Azam, Commented Jan 22, 2017 at 0:45

T.J. Crowder · Accepted Answer · 2017-01-20 08:07:26Z

If I'm inferring what you want properly, you just use a nested map:

render() {
    return <div>
        {this.state.jsonData.map(function(category) {
            return <div>
                <div>Category: {category.category}</div>
                {category.categorydata.map(function(data) {
                    return <div>
                        <div>Client: {data.clientname}</div>
                        <div>Report: {data.reporthtml}</div>
                    </div>;
                })}
                </div>;
        })}
    </div>;
}

Live Example:

class Category extends React.Component {
    constructor(...args) {
        super(...args);
        this.state = {};
        this.state.jsonData = [{
          category: "1",
          categorydata: [{
            clientname: "rahul1",
            reporthtml: "hello1"
          }, {
            clientname: "rahul2",
            reporthtml: "hello2"
          }, ]
        }, {
          category: "2",
          categorydata: [{
            clientname: "rahul1",
            reporthtml: "hello1"
          }, {
            clientname: "rahul2",
            reporthtml: "hello2"
          }, ]
        }];
    }

    render() {
        return <div>
            {this.state.jsonData.map(function(category) {
                return <div>
                    <div>Category: {category.category}</div>
                    {category.categorydata.map(function(data) {
                        return <div>
                            <div>Client: {data.clientname}</div>
                            <div>Report: {data.reporthtml}</div>
                        </div>;
                    })}
                    </div>;
            })}
        </div>;
    }
};

ReactDOM.render(
    <Category />,
    document.getElementById("react")
);

<div id="react"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

I changed the array and inside the loop i need some if else conditions

challenger · Accepted Answer · 2017-01-20 09:19:51Z

0

and if you have es6 you can enhance the code like that:

render() {
        return <div>
            {
                this.state.jsonData.map(category => <div>
                    <div>Category: {category.category}</div>
                    {
                        category.categorydata.map(data => <div>
                            <div>Client: {data.clientname}</div>
                            <div>Report: {data.reporthtml}</div>
                        </div>
                    )
                    }
                    </div>
            )}
        </div>
    }

answered Jan 20, 2017 at 9:19

challenger

2,2141 gold badge21 silver badges25 bronze badges

Collectives™ on Stack Overflow

Loops inside react jsx render function with if else conditions

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related