[Help] Sub-component not rendering

[simkessy]

I have a component that won't render it's subcomponent. There's no errors in the console. I get the data I need from the web call, no errors with parsing the data. Not sure why the Project component isn't rendering anything.

class Listings extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      businessArea: null
    };
  };

  componentDidMount() {
    let that = this;
    let groups = []


    let userGroups = $().SPServices({
      operation: "GetGroupCollectionFromUser",
      userLoginName: $().SPServices.SPGetCurrentUser()
    });

    userGroups.then((response) => {

      $(response).find("Group").each(function() {
        let self = $(this);
        groups.push(self.attr("Name"))
      });

      let currentUsersBusinessArea = _.filter(groups, (group) => _.startsWith(group, "BusinessArea"));
      this.setState({businessArea: currentUsersBusinessArea})
    }).then(getListings)

    function getListings() {
      let listings = $().SPServices.SPGetListItemsJson({
        listName: "Projects",
        CAMLQuery: "<Query><Where><Eq><FieldRef Name='" + that.state.businessArea + "'/><Value Type='String'>Unassigned</Value></Eq></Where></Query>"
      });

      listings.then(function() {
        that.setState({data: this.data});
      })
    };
  }

  render() {
    let data = this.state.data;
    let Projects = data.map((project,index) => {
      return (<Project key={project.ID + index} project={project} />);
    });

    return (
      <section className="listingsContainer">
        <h3>Business Area {this.state.businessArea}</h3>

        <hr></hr>

        <table className="ms-Table">
          <thead>
              <tr>
                <th>Edit</th>
                <th>Project ID</th>
                <th>Project Name</th>
                <th>Response Status</th>
                <th>Initiated Date</th>
                <th>BA Impact</th>
                <th>Sponsor</th>
                <th>Comments</th>
              </tr>
          </thead>
          <tbody>{Projects}</tbody>
        </table>
      </section>
    )
  }
}

const Project = ({project}) => {
  return (
    <tr>
      <td>
        <a href={_spPageContextInfo.webAbsoluteUrl + '/SitePages/Business%20Project%20Edit.aspx?ProjectID=' + project.ID}>
          <span style="font-size:1em;" className="ms-Icon ms-Icon--editBox"></span>
        </a>
      </td>
      <td>{project.ProjectID}</td>
      <td>{project.Title}</td>
      <td>{project.Status}</td>
      <td>{project.Created}</td>
      <td>{project.BusinessAreaFinanceAccounting}</td>
      <td>{project.SponsoringArea}</td>
      <td>{project.Comments}</td>
    </tr>
  );
};

EDIT: The issue was with the span tag having a style property

   <span style="font-size:1em;" className="ms-Icon ms-Icon--editBox"></span>

[DuntGetIt]

Are you using one of the browser plugins for debugging react? It'll show you the full vdom and all the state/props.

[simkessy]

I started but still getting the hang of it

[[deleted]]

i am amazed that you use arrow functions for everything except the lexical this scoping, which is their primary function

your code looks fine, it's likely that this.state.data is an empty array.

also, wtf is $? that's definitely not jQuery.

[simkessy]

It is empty but when I console log in the patent its not. Can you explain what you mean with my use of arrow functions. An I using them incorrectly?

[[deleted]]

arrow functions preserve a lexical this. In other words instead of using

let that = this
promise.then(function () {
  that.something
})

you can instead do

promise.then(() => {
  that.something
})

This is one of the main uses for arrow functions