Trouble appending value in React Native

Question

I have some code in React Native as follows, as can be seen I am calling a routine within the "componentDidMount" that is intended to load some previously saved variables from 'storage':

export default class Cast extends Component {
state = {
  admin: false,
  isPublishing: false,
  userComment: "",
  hasPermission: false,
  paused: true,
  _email: false,
  _name: false,
  _pword: false,
  _play_ID: false,
  _streamkey: false,
  _playurl: "",
  _streamurl: "",
  };


getKey = async() => {
  try {
    var value = await AsyncStorage.getItem('email');
    this.setState({ _email: value });
    value = await AsyncStorage.getItem('playkey');
    this.setState({ _play_ID: value });
    const playurl = "https://stream.mux.com/" + value + ".m3u8"
    this.setState({ _playurl: playurl });
    value = await AsyncStorage.getItem('castkey');
    this.setState({ _streamkey: value });
    const streamurl = "rtmp://global-live.mux.com:5222/app/" + value
    this.setState({ _streamurl: streamurl });
  } catch (error) {
    console.log("Error retrieving data" + error);
  }
}

componentDidMount(){
  this.getKey();
}

renderCameraView = () => {

  return (
    <NodeCameraView
      style={styles.nodeCameraView}
      /* eslint-disable */
      ref={vb => {
        this.vb = vb;
      }}
      /* eslint-enable */
      outputUrl = {this.state._streamurl}
      camera={settings.camera}
      audio={settings.audio}
      video={settings.video}
      autopreview
    />
  );
};

renderPlayerView = () => {

const { paused } = this.state;
const source = {
  uri: _playurl  //SEEMS TO ACCEPT THIS VARIABLE WITHOUT CURLY BRACKETS OR 'THIS.STATE.'...NOT SURE WHY...? 
};
  return (
    <Video
      source={source} // Can be a URL or a local file.
      /* eslint-disable */
      ref={ref => {
        this.player = ref;
      }} // Store reference
      /* eslint-enable */
      onBuffer={this.onBuffer} // Callback when remote video is buffering
      onError={this.onError} // Callback when video cannot be loaded
      style={styles.nodePlayerView}
      fullscreen={false}
      resizeMode="cover"
      paused={paused}
    />
  );
};


//...

The issue I am having is for some reason it is impossible to append the value of '_streamkey' to a string. Within the 'renderCamerView' function I am attempting to set the value of 'outputUrl' without success. This function is called upon a button press. I have been struggling with this for quite some time. As can be seen in my code post as currently written I am receiving a "JSX value should be either an expression or a quoted JSX text." error. However if I try something like:

outputUrl="rtmp://global-live.mux.com:5222/app/" + this.state._streamkey

That throws an "unexpected token" error that seems to indicate the "+" is bad syntax. Any suggestions on how to solve this are GREATLY appreciated, as mentioned this has been driving me crazy. Thank you in advance.

Answer 1

I think you have to tweak your syntax a bit to do string concatenation in your react component:

outputUrl={"rtmp://global-live.mux.com:5222/app/" + this.state._streamkey}

or use string interpolation:

outputUrl={`rtmp://global-live.mux.com:5222/app/${this.state._streamkey}`}

Does that help?