CODEWITHSUNDEEP
node.jsreactjsreduxreact-redux
Smith
Smith

Reputation: 15

Can I filter an array of objects from state and then render them?

I'm trying to filter products from my state and then render them on the page.

The idea is to compare the products.user_id and make sure it matches my currently logged in user.user_id and then render only the products that pass.

I'm trying have one view on page with all products in total, and the view next to it would have all of the specific logged in user's products.

I have attempted a bunch of different combinations of filter, but i think the main issue im having is finding how to use render with the filter function.

With map, you can just map the different properties directly onto the page and pass them down as props for example to be rendered, but with filter, it doesn't user the same syntax. I could be wrong though.

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { get_user, get_products } from '../../ducks/reducer';
import axios from 'axios';

class SellerProducts extends Component {
constructor() {
    super();
    this.state = {
        products: []
    };
}
componentDidMount() {
    this.props.get_user();
    // console.log('specific user product', this.props.get_products());

    axios.get('/api/product').then(res => {
        // console.log('Get all products (SellerProducts', res);
        this.setState({ products: res.data });
        console.log('SellerProducts products', this.state.products);
    });
    console.log('sellerproduct component mount user', this.props.user);
}
render() {
    let sellersItems = [];

    // if (this.state.products.length > 0) {
    //  sellersItems = this.state.products.filter((products, i) => {
    //      console.log('incoming array',products)
    //      return products[i].user_id === this.props.user.user_id;
    //  });
    // }
    if (this.props.loggedIn === false) {
        return (
            <div className="product_container">
                <div>
                    {sellersItems}
                    <div>
                        {this.props.product_name}
                    </div>
                    <div>
                        {this.props.info}
                    </div>
                    <div>
                        {this.props.product_type}
                    </div>
                    <div>
                        <img
                            className="sellerProductImages"
                            src={this.props.img_url}
                            alt={this.props.product_type}
                        />
                    </div>
                </div>
            </div>
        );
    }
    if (this.state.products.length > 0 && this.props.loggedin === true) {
        sellersItems = this.state.products.filter((products, i) => {
            console.log('incoming array', products);
            return products[i].user_id === this.props.user.user_id;
            return {
                products[i].user_id === this.props.user.user_id;

            } 

        });
    }
}
}
const mapStateToProps = state => state;

export default connect(mapStateToProps, {
get_user,
get_products
})(SellerProducts);

Upvotes: 0

Views: 2126

Answers (3)

Ricardo Gonzalez
Ricardo Gonzalez

Reputation: 1879

You can create a jsx element inside the filter like this:

if (this.state.products.length > 0 && this.props.loggedin === true) {
    sellersItems = this.state.products.filter((products, i) => {
        console.log('incoming array', products);
     if( products[i].user_id === this.props.user.user_id ){
       return <span> { products[i].name } </span>
     } 
    });
}

This way you just iterate one time through all your products instead of filtering and then mapping in separete iterations.

Upvotes: 0

ageoff
ageoff

Reputation: 2828

It looks like you are pretty much there. You are correct that you cannot directly render from filter, but you generated your filtered list that you can then just map over.

if (this.state.products.length > 0 && this.props.loggedin === true) {
    sellersItems = this.state.products.filter((products, i) => {
        console.log('incoming array', products);
        return products[i].user_id === this.props.user.user_id; 
    });
    sellersItems.map(item => (<span>{item.name}</span))
}

Upvotes: 0

varoons
varoons

Reputation: 3887

You are not returning the items in the second block Also you are returning twice. Removed in the block below

   var sellersItems = this.state.products.filter((products, i) => { // <-----
        console.log('incoming array', products);
        return products[i].user_id === this.props.user.user_id;
    });

    return sellersItems.map(item => {
       // However you want to display the items
       return <div> {item.user_id} </div>
    })

Upvotes: 1

Related Questions