ReactJS: rendering multiple objects in return

Question

I don't know what the appropriate title for this should be, so sorry if it's not accurate.

I have a list of objects in state:

people: [
{first:'First_1', last:'Last_1', title:' Title_1', company:'Company_1'},
{first:'First_2', last:'Last_2', title:'Title_2', company:'Company_2'},
],

Currently I'm rendering each attribute into a column like this:

var first = this.state.people.map(function(person, i) {
            return (
                <div key={i}>
                    {person.first}
                </div>
            )
        });

Same thing for last, title, etc.

And then in return:

return (
            <div>
                <Grid>
                    <Row className="show-grid">
                        <Col md={2}>
                            {first}
                        </Col>

                        <Col md={2}>
                            {last}
                        </Col>

                        <Col md={2}>
                            {title}
                        </Col>
                        <Col md={2}>
                            {company}
                        </Col>
                        <Col md={2}>
                            Recruiter Phone Screen
                        </Col>

                    </Row>
            </Grid>

            </div>
        )

This currently works, but I have two issues:

1) I have a var first = ..., var last = ..., etc etc for each attribute.

2) if one attribute is missing, it messes everything up. IE - if First_1 doesn't have a title, Title_2 will be given to that record.

I was trying to combine everything into one variable:

var test = this.state.people.map(function(person, i) {
            return {
                first: function() {
                    return (
                        <div key={i}>{person.first}</div>
                    )
                },

                last: function(){
                    return (
                        <div>{person.last}</div>
                    )
                }
            }

        });

And in return:

 <Col md={2}>
     {test.first}
 </Col>
 <Col md={2}>
     {test.last}
 </Col>

etc.

This doesn't work, but I was wondering if there was a way to make this work?

Gayane · Accepted Answer · 2016-12-19 17:09:43Z

I would do this with a single function, like:

getParams (param) {
 this.state.people.map(function(person, i) {
   return (
      <div key={i}>
          {person[param]}
      </div>
   )
  })
}

and in render you will have this:

return (
        <div>
            <Grid>
                <Row className="show-grid">
                    <Col md={2}>
                      {this.getParams('first')}
                    </Col>

                    <Col md={2}>
                        {this.getParams('last')}
                    </Col>

                    <Col md={2}>
                        {this.getParams('title')}
                    </Col>
                    <Col md={2}>
                        {this.getParams('company')}
                    </Col>
                    <Col md={2}>
                        Recruiter Phone Screen
                    </Col>

                </Row>
        </Grid>

        </div>
    )

Shubham Khatri · Accepted Answer · 2016-12-19 17:09:50Z

0

I suppose a better way to deal with this situation is to create a table rather than going with the columns in a div

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      people: [
        {first:'First_1', last:'Last_1', title:' Title_1', company:'Company_1'},
        {first:'First_2', last:'Last_2', title:'Title_2', company:'Company_2'},
        ]
    }
  }
  render() {
       return (
          <table>
              <tbody>
                  {this.state.people.map(function(item, index) {
                      return (
                          <tr>
                              <td>{item.first}</td>
                              <td>{item.last}</td>
                              <td>{item.title}</td>
                          </tr>
                      )
                   })}
              </tbody>
          </table>
        )     
   }
}
        
        ReactDOM.render(<App/>, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react-dom.min.js"></script>

<div id="app"></div>

answered Dec 19, 2016 at 17:09

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

4 Comments

dropWizard Over a year ago

I'm trying to avoid using Tables entirely :-(

Shubham Khatri Over a year ago

You can do that definitely but , I think this way its more cleaner and the code that you need to write is also shorter

dropWizard Over a year ago

I agree, but it would break the rest of the application. I actually wrote this initially using tables and trying to re-write it without just due to issues that I came across later on.

Shubham Khatri Over a year ago

Ok, no problem.

Collectives™ on Stack Overflow

ReactJS: rendering multiple objects in return

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related