React: Creating a row per item in an array [duplicate]

Question

I am passing an array of objects as a prop to my Table component, it is supposed to turn every item in the array to a row in a table. But it is not outputting anything...

I have used console.log to successfully look into each item within the array. This is my code:

import React from 'react'; 

export default class Table extends React.Component {
    getTableRow(x) {
        console.log(x); 
        return ( <tr>
                <td>{x.prop1}</td>
                <td>{x.prop2}</td>
                <td>{x.prop3}</td>
        </tr>); 
    }

    resolveInput() {
        //expecting array
        const array = this.props.lastFiveList; 
        //array.map(x => console.log(x)); 
        array.map(x => this.getTableRow(x)); 
    }           

    render() {
        return (
            <table>
             {this.resolveInput()}
            </table>
        ); 
    }
}

I have also tried to bind both functions (same result) and place what getTableRow is supposed to return into a variable and then returned the variable instead of the multiline return(); statement. Furthermore, I tried using forEach instead of map.

Miguel Calderón · Accepted Answer · 2018-02-14 12:42:29Z

3

You're not returning the array in resolveInput():

    return array.map(x => this.getTableRow(x));

answered Feb 14, 2018 at 12:42

Miguel Calderón

3,1011 gold badge20 silver badges19 bronze badges

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

3 Comments

Miguel Calderón Over a year ago

I'd need more info on the component to help you. Where does this.props.lastFiveList come from?

user8951490 Over a year ago

Nevermind, I resolved it. You were right... My resolveInput was not returning anything. Thank you, Miguel! I think your response came in first, so consider your answer the accepted answer in a few minutes.

Andy Over a year ago

@user8951490 Note also that you'll get warnings about trs not being a child of a tbody element, and your trs need keys. Here's a fixed version.

Ved · Accepted Answer · 2018-02-14 12:44:54Z

3

resolveInput method is not returning anything. You need to return

resolveInput() {
    //expecting array
    const array = this.props.lastFiveList; 
    //array.map(x => console.log(x)); 
    return  array.map(x => this.getTableRow(x)); 


}

edited Feb 14, 2018 at 12:44

answered Feb 14, 2018 at 12:42

Ved

12.1k5 gold badges46 silver badges61 bronze badges

1 Comment

Ved Over a year ago

@GabyakaG.Petrioli thanks for pointing. I updated the mistake.

Tim Han · Accepted Answer · 2018-02-14 12:47:36Z

0

You resolveInput() method is not returning the array that you have created from the map or returning anything for that matter. So try return the new array that you mapped from the array that was passed in.

answered Feb 14, 2018 at 12:47

Tim Han

1661 silver badge12 bronze badges

Collectives™ on Stack Overflow

React: Creating a row per item in an array [duplicate]

3 Answers 3

3 Comments

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

Comments

Linked

Related