Configure If-Else Component, React

Question

I have added an if-else element to my React Component per the documentation; however, due to the syntactical differences between including a React component with <></> and {} I am unsure of how to further configure the component.

Here is a reduced version of what I have (written in TypeScript):

public render() {
    const mediaElement: HTMLMediaElement = this.getMediaElement();
    return { mediaElement };
}

Here is getMediaElement() reduced:

private getMediaElement() {
    //... video can also be returned
    return document.createElement("audio");
    //...
}

From here, preferably inline, I would like to be able to add class information, etc., something akin to (as also doable in React):

<li className="media-file-title">

How do I go about accessing properties on the element with the above syntax? Ultimately, I am in need of assigning a ref. Any documentation would be great!

Is it only doable through object properties, i.e.:

mediaElement.src = ""

can you paste your getMediaElement() method implementation? I don't get if getMediaElement() returns a React Class or a plain html element ? — Ivan Drinchev
– Ivan Drinchev, Commented May 11, 2016 at 14:39

Community · Accepted Answer · 2017-05-23 11:52:44Z

2

I think your best approach would be to render a React Element instead of plain HTML element. See React.js write components directly in HTML .

You can rewrite your code like :

private getMediaElement(src) {
    //... video can also be returned
    return (<audio src={ src } />);
    //...
}

public render() {
    const mediaElement = this.getMediaElement(this.props.src);
    return (mediaElement);
}

Then you can access the props of the class later via the props of your component.

edited May 23, 2017 at 11:52

CommunityBot

11 silver badge

answered May 11, 2016 at 15:00

Ivan Drinchev

19.6k4 gold badges69 silver badges97 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Configure If-Else Component, React

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related