Harugawa Harugawa - 7 days ago 7
React JSX Question

Nested datatable while maping

Ok, I'm a react newbie. Basically I have two tables

products
and
categories
.
I managed to map out
products
with:

var ProductsList = React.createClass({
render: function () {
var EachProduct = this.props.data.map(function (item) {
return (
<SingleProduct key={item.Id } data={item}/>
);
});
return (
<ul>
{EachProduct}
</ul>
);
}


});

...and there is yet that second table
categories
. I tried googling but I did not really knew how to google it.
Normally I could just send two models to view from controller and could just do foreach in foreach and the second one would just look into
categories
for
fk_product_id
or something like that, so that
<SingleProduct/>
class could show all categories that are connected with mapped product ..but this is just a different story.

I don't know how to do that @_ @. If someone could lead me with it, I would be thankful.

Answer

Maybe something like this would help:

render: function () {
var EachProduct = this.props.data.map(function (item) {
    var category = this.props.categories.find((categoryItem)=>{
         return (item.categoryId === categoryItem.id)
    })
    return (
            <SingleProduct key={item.Id } data={item} category={category}/>
    );
});
return (
    <ul>
        {EachProduct}
    </ul>
    );

}