How to render uploaded image (image object) not to get an error (Objects are not valid as a React child )?

Question

I'm trying to set up an image loader in React component, to display/render it after loading (client side only, no http requests). The image loads up as an object, resulting in a rendering error: "Objects are not valid as a React child"

import React, { Component } from "react";

export default class extends Component {
    state = {
        selectedImage: null
    }


    onChange = (event) => {
        this.setState({
            selectedImage: event.target.files[0],
        })
    }


    render() {
        return (
            <div>

                <div>
                    {this.state.selectedImage && this.state.selectedImage}
                </div>

                <form onSubmit={this.onFormSubmit}>
                    <input type="file" name="someImage" accept="image/*" onChange={this.onChange} />
                    <button>Add This Car</button>
                </form>
            </div>
        )
    }
}

Expected result - loaded image displayed/rendered on screen. Actual result - Error: "Objects are not valid as a React child" ...

score 0 · Accepted Answer · answered Apr 26 '19 at 03:35

Uploaded file is not something that can be displayed, you'll require <img /> tag with src attribute

And the value for src attribute can be generated by reading contents of event.target.files[0]

Something like this should do:

import React, { Component } from "react";

export default class extends Component {

    constructor(props) {
        super(props);

        this.state = {
            selectedImage: null.
            selectedImageContent: ""
        }
    }



    onChange = (event) => {
        const file = event.target.files[0];
        const fileReader = new FileReader();
        fileReader.onload = this.onFileLoad;
        this.setState({
            selectedImage: event.target.files[0]
        })
    };

    onFileLoad = (e) => {
        this.setState({
            selectedImageContent: e.target.result
        });
    }


    render() {
        const { selectedImageContent } = this.state;
        return (
            <div>

                <div>
                    {selectedImageContent && <img src={selectedImageContent} />}
                </div>

                <form onSubmit={this.onFormSubmit}>
                    <input type="file" name="someImage" accept="image/*" onChange={this.onChange} />
                    <button>Add This Car</button>
                </form>
            </div>
        )
    }
}

More info here

How to render uploaded image (image object) not to get an error (Objects are not valid as a React child )?

1 Answers1