CODEWITHSUNDEEP
reactjs
Stupid.Fat.Cat
Stupid.Fat.Cat

Reputation: 11295

How do you pass in a property when instantiating a React component

This is what my component looks like:

class PersonProfileBadge extends React.Component {
    constructor(props) {
        super(props);
        this.alias = this.props.alias;
        //this.alias = 'hardcodedvalue';
    }

    render() {
        return e(
            'img',
            {
                src: `https://internal-cdn.com/somepath/?uid=${this.alias}`,
                className: 'profile_photo'
            }
        );
    }
}

And now I want to instantiate it and render it like so

const navProfilePicture = document.querySelector('#profile_image');
ReactDOM.render((new PersonProfileBadge({'alias': 'stupidfatcat'})), navProfilePicture)

But doing so spits out this error

Objects are not valid as a React child (found: object with keys {props, context, refs, updater, alias}). If you meant to render a collection of children, use an array instead.

I'm pretty new to react and I have no idea how to properly do this.

Doing this works but then I can't pass in the property for the alias

ReactDOM.render(e(PersonProfileBadge), navProfilePicture);

Upvotes: 0

Views: 105

Answers (1)

CertainPerformance
CertainPerformance

Reputation: 370799

The proper way to do this would be to get your environment to support JSX instead:

const navProfilePicture = document.querySelector('#profile_image');
ReactDOM.render(
  <PersonProfileBadge alias='stupidfatcat' />,
  navProfilePicture
);

But if you can't do that, use React.createElement when calling ReactDOM.render - not just in your component's render method:

ReactDOM.render(
  e(PersonProfileBadge, {'alias': 'stupidfatcat'}),
  navProfilePicture
);

Upvotes: 1

Related Questions