What is the error “Failed to construct ‘Image’: Please use the ‘new’ operator, this DOM object constructor cannot be called as a function.” [closed]

import React, { useEffect, useState } from 'react' // DO NOT DELETE
import { BreedsSelect } from './BreedsSelect'
export const DogListContainer = () => {
  const [breedsurl, setBreedsurl] = useState()

  const fetchImages = async breed => {
    const response = await fetch(
      `https://dog.ceo/api/breed/${breed}/images/random/12`,
    )
    const data = await response.json()
    setBreedsurl(data.message)
  }
  const [breeds, setBreeds] = useState({})
  useEffect(() => {
    const fetchAll = async () => {
      try {
        const data = await fetch('https://dog.ceo/api/breeds/list/all')
        if (!data.ok) throw new Error('error')
        return data
      } catch (error) {
        return error
      }
    }

    fetchAll()
      .then(res => res.json())
      .then(data => {
        setBreeds(data.message)
      })
  }, [])
  return (
    <div>
      <BreedsSelect breeds={breeds} onFormSubmit={fetchImages} />
      <div className="columns is-vcentered is-multiline">
        {breedsurl?.map(url => {
          return (
            <div key={url} className="column is-3">
              <Image src={url} />
            </div>
          )
        })}
      </div>
    </div>
  )
}

import React, { useState } from 'react'
export const BreedsSelect = props => {
  const [selectedBreed, setSelectedBreed] = useState(null)
  function handleSubmit(event) {
    event.preventDefault()
    props.onFormSubmit(selectedBreed)
  }
  const options = props.breeds
  return (
    <div>
      <form onSubmit={handleSubmit}>
        <select
          value={selectedBreed}
          onChange={e => setSelectedBreed(e.target.value)}
        >
          {Object.keys(options).map(breed => (
            <option value={breed}>{breed}</option>
          ))}
        </select>
        <button type="submit">表示</button>
      </form>
    </div>
  )
}

I would like to have a “View” button next to the dropdown that, when clicked, displays a list of images for the dog breed selected in the dropdown.

1. Place a “Show” button next to the dropdown.
2. When the “Display” button is clicked, get the image list of the dog breed selected in the dropdown using the Dog API.

• Depending on the dog breed, more than 100 records will be returned, so limit the number of records to be acquired (eg: 12 records).
• Use useState to manage the obtained list in state (write the definition of state in DogListContainer)

3. Based on the acquired dog breed image list, display the images as a list.

I thought of the above two codes to realize this, but I get the error Failed to construct ‘Image’: Please use the ‘new’ operator, this DOM object constructor cannot be called as a function. How can I resolve it?

Answer

Your Image tag should be in lowercase img. or if you are using NextJs import Image from "next/image"

return (
    <div>
      <BreedsSelect breeds={breeds} onFormSubmit={fetchImages} />
      <div className="columns is-vcentered is-multiline">
        {breedsurl?.map(url => {
          return (
            <div key={url} className="column is-3">
              <img src={url} /> //here
            </div>
          )
        })}
      </div>
    </div>
  )