【React学習】ランダム画像表示画面を作成

こちらの記事を参考に、ランダム画像表示画面をつくりました。

作ったもの

画像取得ボタンを押すと、ランダムで画像が表示されます。サイズは800pxで固定しました。

ソースコードは以下です。ほかのサイトから参考にした点も多いです。

        function ImageButton() {

            const [image, setImage] = React.useState(null);

            const onClick = checked => {
                fetch('https://picsum.photos/800', {
                    method: 'GET',
                    mode: "cors"
                })
                    .then(res => res.blob())
                    .then(blob => {
                        setImage([URL.createObjectURL(blob)]);
                        console.log(URL.createObjectURL(blob));
                    })
                    .then(data => {
                        // .thenは成功した時の処理を示す場合に使う。
                        console.log('Success');
                    })
                    .catch((error) => {
                        // .catchは失敗の時の処理を示す場合に使う。
                        console.error('Error:', error);
                    });


            };

            return (
                <div className="panel">
                    <button onClick={onClick}>
                        画像取得
                    </button>
                    <img src={image} width="800px" />
                </div>
            );
        }

        function App() {
            return (
                <div className="container is-fluid">
                    <ImageButton />
                </div>
            );
        }

        const root = document.getElementById('root');
        ReactDOM.render(<App />, root);

詰まった点

• 元にしたページで紹介されていたhttps://source.unsplash.com/random が使用できなくなっていたので、代わりに https://picsum.photos を使用しました。
• ランダムに表示させようと https://picsum.photos/800?random でリクエストしていたのですが、なぜか画像が表示されませんでした。
  　30分ぐらい悩んでようやく解決しました。