CODEWITHSUNDEEP
javascriptreactjsimagecomponentsreact-props
Nick Kinlen
Nick Kinlen

Reputation: 1404

React: Pass image from this.state in parent component to child component

I have an image I've imported to a React class component like this:

import Hat3 from './assets/hat3/hat3.png';

To display this image in this component I can do:

<img src={hat3} />

I have a child component called FeaturedItem that looks like this:

<FeaturedItem hat={this.state.hat3}/>

I want to pass the hat3 image to the FeaturedItem component via the prop hat. How can I store the hat3 image in state so that I can pass it to the functional FeaturedItem component?

I've tried the following:

constructor(props) {
        super(props);

        this.state = {
           // Doesn't work
           hat3: {hat3}
           // Doesn't work
           hat3: ${hat3}
           // Doesn't work
           hat3: `${hat3}`
        };
    }

What is the proper way to store this image in state so that I can pass it to the child component via props and display it in the child component?

Upvotes: 0

Views: 388

Answers (1)

Nikhil Goyal
Nikhil Goyal

Reputation: 1973

Try below code

this.state = {
    hat3: Hat3
};

In case if this doesn't work, can you please share what error you are getting.

Upvotes: 2

Related Questions