Why are my keys duplicating?

Question

Here is my render method:

  render: function() {
    var rows = this.state.users;
     return (
        <div className="container">
            <dl className="row">
                <div className="col-md-12">
                    <Table
                        rowHeight={50}
                        rowsCount={rows.length}
                        width={800}
                        height={500}
                        headerHeight={50}>
                        <Column
                            header={<Cell>First Name</Cell>}
                            cell={(_.map(rows, function(row) {
                                return <Cell key={row.id}>{row.firstname}</Cell>;
                            }))}
                            width={200}
                        />
                    </Table>
                    <button type="button" onClick={this.formPopup}>Add User</button>
                </div>
            </dl>
        </div>
    );

Why is the view still showing duplicates? here is a link to the full code: https://github.com/DannyGarciaMartin/react-webpack/blob/master/js/source/comp/UserView.jsx

I don't understand. Shouldn't my mapping make distinctions with what the input renders for the fixed-data-table?

Here's an image as proof the keys aren't working...

score 1 · Accepted Answer · answered Mar 18 '17 at 03:50

1

The cell prop should be a node or a function see this for more details.

So,change the cell to

cell={props => (
        <Cell {...props}>
          {rows[props.rowIndex].firstname}
        </Cell>
      )}

answered Mar 18 '17 at 03:50

wuxiandiejia

851
1
10
15

Can you explain what props => (...)} does/means? This works, thanks. I thought passing _.map(...) is a function however. So I'm guessing the "props => ..." is required. – fungusanthrax Mar 18 '17 at 15:32
1

_.map() is invoking a function,the result is an Array. So, the `cell`'s value is Array,not a function.In my answer,cell=function,in your code cell=function()//call a function.Column component will call the cell prop some times base on the rowCount,so you need not to map the row data. – wuxiandiejia Mar 18 '17 at 15:46

Why are my keys duplicating?

1 Answers1