HTMLImageElement not valid as a React Child

Question

I'm trying to load an image asynchronously and only when it's been loaded, display it in a React app.

componentDidMount() {
    const img = new Image();
    img.onload = () => {
        this.setState({
            originalImage: img,
        });
    }
    img.src = './images/testImage.jpg'
}

render() {
    return (
       <main>
           {
              this.state.originalImage
           }
       </main>
    );
}

I'm getting below error:

Objects are not valid as a React child (found: [object HTMLImageElement])

I would like to know why this error is happening. Of course if I just add an <img> tag, it works fine.

@ravibagul91 img.onload is a function that is always invoked after an image has been loaded. It's pretty common. I'm not sure what you mean. — Scruffy, Jul 18 '19 at 09:02
@MichaelDoye thank you, that partially explains why it isn't working. — Scruffy, Jul 18 '19 at 09:25

score 4 · Accepted Answer · answered Jul 18 '19 at 09:57

React cannot directly display HTML Element. If you want to create elements programmatically you have to use functions provided by React.

componentDidMount() {
    const url = 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRYd74A26KhImI1w9ZBB-KvWUcasVnQRe_UOrdZPqI4GOIN0mC3EA';

    let img = React.createElement(
      "img",
      {
        src: url,
      },
    )
    this.setState({
      originalImage: img,
    })


    let divExample = React.createElement(
      'div',
      null,
      `Hello World`
    );
    this.setState({
      divExample: divExample
    })
}

render() {
    return (
      <div>
        <div>Hi</div>
        {
          this.state.divExample
        }
        <main>
          {
            this.state.originalImage
          }
        </main>
      </div>
    );
}

React parses jsx element like div, img, HelloWorld (custom) etc. and create React Elements out of it.

score 1 · Answer 2 · answered Jul 18 '19 at 08:58

1

As the error says, this.state.originalImage is an object. You probably are looking for it's src prop, which you can use like so:

 render() {
    return (
        <main>
          <img src={this.state.originalImage.src}/>
        </main>
    );
}

answered Jul 18 '19 at 08:58

Clarity

10,730
2
25
35

It's a HTMLImageElement. I thought that we can keep such elements in a variable and then render them in React. In regular javascript, I could add this image object (HTMLImageElement) to the page with appendChild. – Scruffy Jul 18 '19 at 09:00
It would be `this.state.originalImage.attributes.src` – Michael Doye Jul 18 '19 at 09:20
@MichaelDoye where does it say that? https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement – Clarity Jul 18 '19 at 09:32

score 1 · Answer 3 · answered May 06 '21 at 10:10

1

another idea is dangerouslysetInnerHTML - something like this ?

<div dangerouslySetInnerHTML={{ __html: this.state.originalImage.outerHTML }}/>}

answered May 06 '21 at 10:10

gray

798
18
31

1

This is the answer right here folks! – Sgnl May 27 '22 at 09:35

HTMLImageElement not valid as a React Child

3 Answers3

Linked