Unique ID pour les listes d'élément dans REACT Js avec Uuid

Pour obtenir un unique Id (Uuid) dans React, il y a plusieurs solutions.

La solution du Timestamp
Que je ne n'utilise pas, étant donné que je considère que plusieurs utilisateurs peuvent ajouter un élément de liste en DB à une même table et en même temps, ce qui pourrait créer des conflits.

La solution nombre d'élément de la liste + 1
A utiliser dans des cas où, un Id est nécessaire temporairement.

La solution Uuid
Uuid est un plugin, qui, comme sa description l'indique, génère simplement et rapidement des unique id RFC4122.

Alors, si l'on travaille sur un projet REACT, nous avons installé sur notre machine, Node Js et React.

Installons Uuid

Plaçons nous dans le dossier de notre projet, puis :

npm install uuid

Dans le cas d'un projet REACT, nous allons importer notre plugin et non le requérir().
 

// Version 4 (random):
const uuidv4 = require('uuid/v4');
uuidv4(); // ⇨ '10ba038e-48da-487b-96e8-8d3b99b6d18a'

Selon la documentation, pour obtenir un id en mode Random, nous utilisons la Version 4.
 

import React, {Component} from 'react';
import Formulaire from './desk/Formulaire';
import ItemList from './desk/ItemList';
// J'importe mon plugin
import Uuid from 'uuid/v4';

class App extends Component {

  state = {
    articles : []
  }

  addArticle = (article) => {
    let oldArticles = this.state.articles;
    // J'utilise mon plugin
    article.id = Uuid();
    let newArticles = [...oldArticles, article];
    this.setState({ articles: newArticles});
  }

  render(){
    return (
      <div>
        <h3>Ma liste d'articles</h3>
        <Formulaire formTitle="Ajouter un article" addArticle={this.addArticle} />
        <ItemList articles={this.state.articles} />
      </div>
    )
  }
}

export default App;