Iterating through a for loop and appending results to a react component

Question

Im curious on how to iterate through an array and append the results to a react component. Ive gotten the part of sorting through an array of objects and grabbing the accounts that I want. Now im unsure of how to go about appending them to html.

export default class SortedTeams extends React.Component {


  renderContent(content){
    var entries = [{fullname: 'foo', title: 'designer'}, {fullname: 
    'foo2', 
    title: 'designer'}, {fullname: 'foo3', title: 'developer'}]
    var nohit = [];

    for(var i = 0; i <= entries.length - 1; i++) {

      if(entries[i].title === 'designer'){
        console.log('foohit');
  }
      else{
        nohit.push('nope')
   }
  }

  render() {
    var content = this.props.block.content;


    return(
      <SiteBuilderBlock tag="section" className="sortedTeams" block={this.props.block}>
        <div>
        <SiteBuilderList tag="div" list="teams" inGroupsOf={4} inGroupsOfClassName="row">
         {(element, key) => this.renderContent(element, key)}
      </SiteBuilderList>
    </div>

  </SiteBuilderBlock>
);

}

On the bus now so can't help much with code but have a look at the map method. facebook.github.io/react/docs/lists-and-keys.html — Dragomir Kolev
– Dragomir Kolev, Commented Aug 22, 2017 at 16:07

Edgar Henriquez · Accepted Answer · 2017-08-22 17:00:20Z

1

Use .map() to iterate through an array. In this case contacts is an array of objects like entries. Here I'm using an ES6 syntax and JSX.

The map() method creates a new array with the results of calling a provided function on every element in the calling array.

return(
  <div>
    <ul>
      { contacts.map(contact => (
          <li key={contact.id}>
            {contact}
          </li>
        )
      )}
    </ul>
  </div>
);

answered Aug 22, 2017 at 17:00

Edgar Henriquez

1,3731 gold badge15 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Iterating through a for loop and appending results to a react component

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related