JAVASCRIPT

React keys

import React, { useState, Children } from 'react';
import { uuid } from 'uuidv4';

const Songlist = () => {
    const [songs, setSongs] = useState([
        { title: "Song 1"},
        { title: "Song 2"},
        { title: "Song 3"}
    ]);

    const addSong = () => {
        setSongs([...songs, { title: "New Song"}]);
    }

    return (
        <div className="song-list">
            <ul>
                {songs.map(song => {
                    return ( <li key={uuid()}>{song.title}</li> );
                })}
            </ul>
            <button onClick={addSong}>Add Song</button>
        </div>
    );
}

export default Songlist;