Component overwrites this.props

[billyjbryant]

I use this.props to send my components props to utilize.

I define this in my App.js via a line in render which passes the props from state to the data property:

        <Twitch data={this.state.resumeData.social}/>   

On the component I am loading this via

var myUsername = this.props.data.twitch

This is so I can retrieve the Username from a JSON file that is stored in State rather than hard coding things.

I am then expecting to pass this to the TwitchEmbed component via

                    <TwitchEmbed channel={myUsername} theme="dark" muted />

This fails indicating that the channel is expected and not defined.

Upon investigating this, I am finding that whenever I have any of the components from react-twitch-embed in the return for my Twitch component, it overwrites this.props with its own data which clears out the properties I am passing the component.

I have never had this issue with other React modules. Any thoughts on what is happening here and how to prevent it?

[moonstar-x]

Hey there, so what the components do to the props is the following:

1. It filters the props that are used by the component so that they're sent to the correct places.
2. Any other props go to the inner div or iframe elements.

By no means would the channel prop be getting removed.

Here's what I believe may be causing your issue:

You say that you're getting the username from a JSON file (I assume it's fetched asynchronously whether you're reading from a local JSON file or an API call). Could it be that your channel prop is actually undefined in a first component render? Have you tried console logging or using the debugger to see what you're passing to the ReactEmbed as a channel prop?

If the above happens to be true, I would add the following line in your render() method inside your Twitch component before the actual return with your components:

if (!myUsername) return null;

This does not render any React component until the Username prop is ready.

[moonstar-x]

Hi there, sorry for the long hiatus.

I'm gonna close this issue due to inactivity. However, I have just updated this package to version 3.0.1 with #37.

There is no more prop filtering, so there's a change this may have been fixed (if it was a bug in the first place).

If you feel this was a mistake, feel free to re-open this issue.

Thanks!