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.
Advertisement
Answer
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.