unique "key" / table should have a unique `key` prop, or set `rowKey

Question

Question: How to pass / create and pass unique key to Radio Button , also i have a Table component that takes data(arra) and it also says that [antd: Table] Each record in dataSource of table should have a unique key prop, or set rowKey . Thank you in advance.

    const userRoles = [
    {
        key: "ROLE_ADMIN",
        name: "Admin"
    },
    {
        key: "ROLE_USER",
        name: "User",
    }
];


class RoleUpdate extends PureComponent {

    constructor(props) {
        super(props);
        this.state = {
            userRole: props.role,
        }
    }

    handleChange = (event) => {
        this.setState({
            userRole: {
                role: event.target.value
            }
        });
        this.props.onRoleChange(event.target.value);
    };

    render() {
        return (
            <Radio.Group value={this.state.userRole.role} onChange={this.handleChange}>
                {userRoles.map(role => {
                    return <Radio.Button value={role.key}>{role.name}</Radio.Button>
                })}
            </Radio.Group>

        )
    };

}

export default RoleUpdate;

<Table size={"middle"}
      columns={columns}
      dataSource={this.state.results}
                   />

Does this answer your question? [How to create unique keys for React elements?](https://stackoverflow.com/questions/39549424/how-to-create-unique-keys-for-react-elements) — Yousaf, May 31 '20 at 10:00

score 3 · Accepted Answer · answered May 31 '20 at 10:02

3

You must pass a key attribute to elements returned from within the loop or map. Assuming userRoles has key property which is unique it can be used as a key like key={role.key} on Radio.Button

render() {
    return (
        <Radio.Group value={this.state.userRole.role} onChange={this.handleChange}>
            {userRoles.map(role => {
                return <Radio.Button key={role.key} value={role.key}>{role.name}</Radio.Button>
            })}
        </Radio.Group>

    )
};

and for the table you need to specify which key from within the data needs to be taken as a key by specifying the rowKey attribute

<Table size={"middle"}
  columns={columns}
   rowKey={"id"} // specify any key which has unique value within this.state.resukts
  dataSource={this.state.results}
/>

answered May 31 '20 at 10:02

Shubham Khatri

270,417
55
406
400

so i need to somehow iterate through the array of data and take for example email as the unique key and assign to key prop ? rowKey={this.state.results.map()}... – Artjom Prozorov May 31 '20 at 10:09
If you are taking about adding unique key to Table then no, you just need to speicfy which attribute in your data holds unique values. For instance say the data is `userRoles`, you will pass the `rowKey="key"` as key attribute in userRoles holds unique key – Shubham Khatri May 31 '20 at 10:10
However when mapping over data and rendering items, you need to pass a `key` prop to the element returned from map, and that key attribute can be any unique value specified like `key={item.key}` or even be `key={index}` in worst case scenario – Shubham Khatri May 31 '20 at 10:11
Currently i have weird behavior and i have a feeling is because of current console error messages -> I have a live search where data changes and each person have radio for example two radio buttons, currently if i locate somebody on second row and change state of the button , when i search again and and the person who appeared on the second row seems to have same option highlighted even tho its a different person, sorry for crap explanation – Artjom Prozorov May 31 '20 at 10:17
You may be storing state based on index. Hard to say though unless you show the relevant code – Shubham Khatri May 31 '20 at 10:18
thank you for your time, i have posted a question before but no answer : https://stackoverflow.com/questions/62101695/live-search-bug?noredirect=1#comment109835472_62101695 – Artjom Prozorov May 31 '20 at 10:19

score 1 · Answer 2 · answered May 31 '20 at 09:59

You need to add key attribute to each element of .map().

The way usually I do is using (role, index) option what you can add as:

<Radio.Group value={this.state.userRole.role} onChange={this.handleChange}>
  {userRoles.map((role, index) => {
     return <Radio.Button key={index} value={role.key}>{role.name}</Radio.Button>
  })}
</Radio.Group>

unique "key" / table should have a unique `key` prop, or set `rowKey

2 Answers2