ResourceList.Item not rendering as expected

Highlighted
New Member
2 0 0

Hey folks,

So I've passed props to ResourceList and am attempting to return a ResourceList.Item for each customer within our app.  While the HTML representing the Item is rendering, none of the content is available on the page.  Here is some code that I've been working with, which matches the Polaris style guide pretty closely save for some props that I'm extracting from the Shopify API using componentWillMount().

Before the JSX return and inside the ResourceList tag I am able to console log the data I wish to pass to the ResourceList.Item.

 

import React, { Component } from 'react';
import { connect } from 'react-redux'; 
import { sendRequest } from '../../actions'

import { ResourceList, Card, TextStyle, Avatar } from "@shopify/polaris";

import CustomerName from '../CustomerName/CustomerName'

class CustomerList extends Component {

  componentWillMount() {
    const requestFields = {
      verb: 'GET',
      path: '/customers.json',
      params: []
    };
    this.props.dispatch(sendRequest(requestFields));
  }
  
  render () {
    const { requestInProgress, requestError, responseBody } = this.props;


    if (responseBody === '') {
      return null;
    }
    
    if (requestInProgress) {
      return (
        <Layout.Section>
        'requesting...';
        </Layout.Section>
      )
    }
    
    const data = JSON.parse(responseBody)
    const customers = data.customers;
    const resourceName = {
      singular: 'customer',
      plural: 'customers',
    };
    
    console.log('are these customers?', customers)

    return (

      <Card>
      
        <ResourceList
          resourceName={resourceName}
          items={customers}
          renderItem={ customer => {
            const { id, first_name, last_name, default_address,email } = customer;
            const name = `${first_name} ${last_name}`
            const media = <Avatar customer size="medium" name={name} />
          
            return (
              <ResourceList.Item
            id={id}
            media={media}
            company={default_address.company}
            email={email}
            >
            <h3>
              <TextStyle variation="strong">{name}</TextStyle>
            </h3>
          </ResourceList.Item>
        );
      }}
      />
    </Card>
    )
  };
}


function mapStateToProps({
  requestFields,
  requestInProgress,
  requestError,
  responseBody,
}) {
  return {
    requestFields,
    requestInProgress,
    requestError,
    responseBody,
  };
}

export default connect(mapStateToProps)(CustomerList);

 

Furthermore, if I remove the ResourceList.Item sub component from the final return statement, I am able to render the data in naked HTML (ex: <h1>{{name}}</h1> renders each customer's name.

Any help is appreciated!

 

 

0 Likes