I am making a React app that allows you to make a list and save it, but React has been giving me a warning that my elements don't have a unique key prop (elements List/ListForm). How should I create a unique key prop for user created elements? Below is my React code

var TitleForm = React.createClass({

    handleSubmit: function(e) {

        e.preventDefault();

        var listName = {'name':this.refs.listName.value};

        this.props.handleCreate(listName);

        this.refs.listName.value = "";

    },

    render: function() {

        return (

            <div>

                <form onSubmit={this.handleSubmit}>

                    <input className='form-control list-input' type='text' ref='listName' placeholder="List Name"/>

                    <br/>

                    <button className="btn btn-primary" type="submit">Create</button>

                </form>

            </div>

        );

    }

});



var ListForm = React.createClass({

    getInitialState: function() {

        return {items:[{'name':'item1'}],itemCount:1};

    },

    handleSubmit: function(e) {

        e.preventDefault();

        var list = {'name': this.props.name, 'data':};

        var items = this.state.items;

        for (var i = 1; i < items.length; i++) {

            list.data.push(this.refs[items[i].name]);

        }

        this.props.update(list);

        $('#'+this.props.name).remove();

    }, 

    handleClick: function() {

        this.setState({

            items: this.state.items.concat({'name':'item'+this.state.itemCount+1}),

            itemCount: this.state.itemCount+1

        });

    },

    handleDelete: function() {

        this.setState({

            itemCount: this.state.itemCount-1

        });

    },

    render: function() {

        var listItems = this.state.items.map(function(item) {

            return (

                <div>

                    <input type="text" className="list-form" placeholder="List Item" ref={item.name}/>

                    <br/>

                </div>

            );

        });

        return (

            <div>

                <form onSubmit={this.handleSubmit} className="well list-form-container">

                    {listItems}

                    <br/>

                    <div onClick={this.handleClick} className="btn btn-primary list-button">Add</div>

                    <div onClick={this.handleDelete} className="btn btn-primary list-button">Delete</div>

                    <button type="submit" className="btn btn-primary list-button">Save</button>

                </form>

            </div>

        )

    }

});





var List = React.createClass({

    getInitialState: function() {

        return {lists:, savedLists: };

    },

    handleCreate: function(listName) {

        this.setState({

            lists: this.state.lists.concat(listName)

        });

    },

    updateSaved: function(list) {

        this.setState({

            savedLists: this.state.savedLists.concat(list)

        });

    },

    render: function() {

        var lst = this;

        var lists = this.state.lists.map(function(list) {

            return(

                <div>

                    <div key={list.name} id={list.name}>

                        <h2 key={"header"+list.name}>{list.name}</h2>

                        <ListForm update={lst.updateSaved} name={list.name}/>

                    </div>

                </div>

            )

        });

        var savedLists = this.state.savedLists.map(function(list) {

            var list_data = list.data;

            list_data.map(function(data) {

                return (

                    <li>{data}</li>

                )

            });

            return(

                <div>

                    <h2>{list.name}</h2>

                    <ul>

                        {list_data}

                    </ul>

                </div>

            )

        });

        var save_msg;

        if(savedLists.length == 0){

            save_msg = 'No Saved Lists';

        }else{

            save_msg = 'Saved Lists';

        }

        return (

            <div>

                <TitleForm handleCreate={this.handleCreate} />

                {lists}

                <h2>{save_msg}</h2>

                {savedLists}

            </div>

        )

    }

});



ReactDOM.render(<List/>,document.getElementById('app'));

My HTML:

<div class="container">

    <h1>Title</h1>

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

</div>

There are many ways in which you can create unique keys, the simplest method is to use the index when iterating arrays.

Example

    var lists = this.state.lists.map(function(list, index) {

        return(

            <div key={index}>

                <div key={list.name} id={list.name}>

                    <h2 key={"header"+list.name}>{list.name}</h2>

                    <ListForm update={lst.updateSaved} name={list.name}/>

                </div>

            </div>

        )

    });

Wherever you're lopping over data, here this.state.lists.map, you can pass second parameter function(list, index) to the callback as well and that will be its index value and it will be unique for all the items in the array.

And then you can use it like

<div key={index}>

You can do the same here as well

    var savedLists = this.state.savedLists.map(function(list, index) {

        var list_data = list.data;

        list_data.map(function(data, index) {

            return (

                <li key={index}>{data}</li>

            )

        });

        return(

            <div key={index}>

                <h2>{list.name}</h2>

                <ul>

                    {list_data}

                </ul>

            </div>

        )

    });

Edit

However, As pointed by the user Martin Dawson in the comment below, This is not always ideal.

So whats the solution then?

Many

• You can create a function to generate unique keys/ids/numbers/strings and use that


• You can make use of existing npm packages like uuid, uniqid, etc


• You can also generate random number like new Date().getTime(); and prefix it with something from the item you're iterating to guarantee its uniqueness


• Lastly, I recommend using the unique ID you get from the database, If you get it.

Example:

const generateKey = (pre) => {

    return `${ pre }_${ new Date().getTime() }`;

}



const savedLists = this.state.savedLists.map( list => {

    const list_data = list.data.map( data => <li key={ generateKey(data) }>{ data }</li> );

    return(

        <div key={ generateKey(list.name) }>

            <h2>{ list.name }</h2>

            <ul>

                { list_data }

            </ul>

        </div>

    )

});

One can use uuid npm package for it.

Nodejs common module

const uuidv1 = require('uuid/v1');

uuidv1(); // '10ba038e-48da-487b-96e8-8d3b99b6d18a

With ecma6:

import uuidv1 from  'uuid/v1';

uuidv1(); // '10ba038e-48da-487b-96e8-8d3b99b6d18a

Updating the answer with v4 of UUID

npm install uuid

-------------------------------------

const uuidv4 = require('uuid/v4');

uuidv4(); // ⇨ '10ba038e-48da-487b-96e8-8d3b99b6d18a'



or



import uuidv from  'uuid/v4';

uuidv4(); // '10ba038e-48da-487b-96e8-8d3b99b6d18a

As mentioned before, using index is an antipattern. The best option I've found so far is:

1) Import "shortid" from React library:

import shortid from 'shortid';

2) Use it in your loop like bellow:

const controls = ;

collection.map(item => {

    controls.push(<div className="column" key={`div-${shortid.generate()}`}>{item.text}</div>);

});

Hope this helps. I just posted this because it was really hard to find a solution like this.

I am using this:

<div key={+new Date() + Math.random()}>