'React Native Class cannot accept props, unable to pass variables?
I am having a difficult time passing variables to a class in React-Native. I can send variables as 'props' between functions, whereby usage of the 'props' parameter in the function will accept variables pushed forward from another function, such as:
Details.js
import React, { useState } from 'react'
import { Button, StyleSheet, TouchableOpacity, Text, View } from 'react-native'
import { Actions } from 'react-native-router-flux'
const Details = (props) => {
//works fine, all 3 variables are passed from the previous calling function...
console.log('DETAILS props called name: ' + props.name);
console.log('DETAILS props called email address: ' + props.address);
console.log('DETAILS props called password: ' + props.password);
//SEND THESE SAME VARIABLES ONWARD TO A COMPONENT/CLASS, CALLED 'VIDEO.JS'...
Actions.push('video', { name: props.name, address: props.address, password: props.password })
}
export default Details
HOWEVER, the same functionality is not possible with a class, for example:
Video.js
import React, { Component, useState, useEffect } from "react";
import { Button, StyleSheet, TouchableOpacity, Text, View } from 'react-native'
import { Actions } from 'react-native-router-flux';
const deviceWidth = Dimensions.get("window").width;
export default class Broadcast extends Component {
//NOT FUNCTIONAL...ERROR THROWN
console.log('VIDEO props called name: ' + props.name);
console.log('VIDEO props called email address: ' + props.address);
console.log('VIDEO props called password: ' + props.password);
goToWeb = () => {
Actions.browser()
}
//...other various functions
}
Is it necessary to declare a 'props' parameter in the class someplace? Is it even possible at all to accept variables in a class from a calling function in this way...or is there some special way to set it up? Thanks in advance for any advice, React Native is extremely confusing to me. There is obviously something I am missing here.
Solution 1:[1]
You need to use this to access props in class components
Try:
console.log('VIDEO props called name: ' + this.props.name);
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | Yan Brito |
