JSFiddle - React, Tailwind, and code Playground

JavaScript

const List = () => {
    const [bookmarks, setBookmarks] = useState([]);

    if(!localStorage.myBookmarks) {
        const newBookmarks = [{href: "https://www.2ch.hk/b", src: "../img/1.png", alt: "2ch.hk", name: "2ch", id: "1"},];
        localStorage.setItem("myBookmarks", JSON.stringify(newBookmarks));
        () => setBookmarks(JSON.parse(localStorage.myBookmarks));
    } else {
        () =>  setBookmarks(JSON.parse(localStorage.myBookmarks));
    }

    let mappedList;

    useEffect(() => {
        mappedList = bookmarks.map(bookmark => {
            return <Item
            href={bookmark.href}
            src={bookmark.src}
            alt={bookmark.alt}
            name={bookmark.name}
            key={bookmark.id}
            />
        })
    }, [bookmarks])
    
    

    return (
        <div>
            {mappedList}
        </div>
    )
}

export default List