Как задавать id новым элементам массива?

Question

[Aristotel Paskalov]

В одном из компонентов я использую метод .map(), чтобы отобразить статьи в приложении:

const articlesList = props.articles.map(article => {
        return <Article article={article} key={article.id} />
    });

Также в приложении есть форма, при помощи который можно добавить новую статью:

export default props => {

    const [articleTitle, setArticleTitle] = useState('');
    const [articleText, setArticleText] = useState('');

    const handleInput = event => {
        if (event.target.name === 'article-title') {
            setArticleTitle(event.target.value);
        } else {
            setArticleText(event.target.value);
        }
    };

    const handleSubmit = event => {
        event.preventDefault();
        props.addArticle({ id: Date.now(), title: articleTitle, text: articleText });
        setArticleTitle('');
        setArticleText('');
    }

    return (
        <div className="admin">
            <form className="article__form" onSubmit={handleSubmit}>
                <label htmlFor="article__title">Название статьи</label>
                <input type="text" value={articleTitle} onChange={handleInput} id="article__title" name="article-title"
                       placeholder="Введите название статьи"/>
                <label htmlFor="article__text">Текст статьи</label>
                <textarea type="text" value={articleText} onChange={handleInput} id="article__text" name="article-text"
                          placeholder="Введите текст статьи"/>
                <button type="Submit">Добавить</button>
            </form>
        </div>
    );
}

В функции handleSubmit мне нужно создавать объект новой статьи, но я не знаю, как указать для неё id. Поэтому временно написал Date.now()

Каким образом можно указать id для этого элемента?

Например, если у последней статьи id 3, то чтобы у создаваемого нами элемента был id 4
Нужно как-то брать id последнего элемента и добавлять к нему 1?

Подскажите пожалуйста

Answer 1

[Алексей Уколов]

Нужно как-то брать id последнего элемента и добавлять к нему 1?

Да.
Метод map тут ни при чём, форма же вне его рендерится. Добавьте компоненту формы prop, в который из родительского передавайте как раз "id последнего элемента + 1".
Получить id последнего элемента можно кучей способов, вот один из них для примера:

let maxId = 0;
props.articles.forEach((article) => maxId = article.id > maxId ? article.id : maxId);

Answer 2

[0xD34F]

Взять максимальный из существующих, добавить единицу:

1 + Math.max(0, ...articles.map(n => n.id))

Или сделать функцию, которая будет возвращать +1 относительно результата предыдущего вызова:

const getId = (() => {
  let id = 0;
  return () => ++id;
})();

Comments

[Алексей Уколов]

Функция только не будет учитывать ситуацию, когда при первом рендере уже есть статьи.

[0xD34F]

Алексей Уколов, нет проблем сделать начальный id параметром. А вообще, это всё не так важно, очевидно же, что речь идёт о какой-то заглушке или учебном проекте - какая на хрен генерация id на клиенте?

[Алексей Уколов]

Именно потому, что видно, что проект учебный, я для автора вопроса и уточнил, что на это стоит обратить внимание. У вас-то, понятно, никаких сложностей тут не возникнет :)