Reactでスライドショーを使いたいのですが、エラーがでてブラウザーに表示しません。何が考えられるでしょうか？教えてください


Reactでスライドショーを使いたいのですが、エラーがでてブラウザーに表示しません。
何が考えられるでしょうか？教えてください

### 発生している問題・エラーメッセージ
TypeError: Cannot set property 'src' of null
Module.<anonymous>

  15 | let currentIndex=0;
  16 | 
  17 | const mainImage =document.getElementById('main');
> 18 | mainImage.src=images[currentIndex];
  19 | 
  

エラーメッセージ
TypeError: Cannot set property 'src' of null

### 該当のソースコード


import React from 'react';

  const images=[
    './img/pic00.png',
    './img/pic01.png',    
  ];

let currentIndex=0;

const mainImage =document.getElementById('main');
mainImage.src=images[currentIndex];

images.forEach((image,index) => {   
  const img = document.createElement('img');
  img.src=image;

  const li = document.createElement('li');
  if(index===currentIndex){
    li.classList.add('current');
  }
  li.addEventListener('click',()=>{
    mainImage.src=image;
    const thumbnails =document.querySelectorAll('.thumbnails>li');
    thumbnails[currentIndex].classList.remove('current');
    currentIndex=index;
    thumbnails[currentIndex].classList.add('current');

  });

  li.appendChild(img);
  document.querySelector('.thumbnails').appendChild(li); //thumbnailsにliを追加
});
  
-----省略--------
 const Slideshow =()=>{
  return(

  <main>
    <img id="main"　alt="" />
    <nav>
      <ul>
        <li id="play">Play</li>
        <li id="prev">&lt;</li>     
        <li id="next">&gt;</li>     
      </ul>
    </nav>
      <ul class="thumbnails"></ul>

   </main>



  );
}

export default Slideshow;


### 試したこと

imagesの中のsrcを画像リンクに変えてもうまくいきませんでした


### 補足情報（FW/ツールのバージョンなど）

Vscodeで　create-react-appを使っています

行動規範の内容に同意します

回答1件

ベストアンサー

html
1<img id="main"　alt="" />

id="main"の直後に全角スペースが入っているため、タグが正しく認識されていない可能性があります。

投稿2021/05/05 01:37

maisumakun

総合スコア145208

wakewakaran

2021/05/05 03:16

すみません。スペースは確認しましたが違うみたいです。 const mainImage =document.getElementById('main');　Idが取得できてないか mainImage.src=images[currentIndex];　srcが取得できてないと思いますが jsxの中のimgの'main'が取得できないからでしょうか？ Reactでなければ普通に動いてました。