this is very basic but I'm new to JS and new to React, I need a few pointers on what I'm doing wrong. I have a Slider components I would like to change, and I would like to reflect/store the new value of the Slider in the class state. How should I be writing this?
I get this error:
TypeError: Cannot read properties of undefined (reading 'value')
Code example below:
import React from 'react';
import { Text, View, Button } from 'react-native';
import Slider from '#react-native-community/slider';
import { TextInput } from 'react-native-paper';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
value1: 1
};
}
render() {
return(
<View>
<Text>Slider</Text>
<Slider
value={this.state.value1}
onValueChange={(e) => this.setState({value1: e.target.value})}
minimumValue={1}
maximumValue={5}
step={1}/>
</View>
);
}
}
export default App;
there is no mood property in your code, I highly recommend you to work with functional components instead of class components to be able to use hooks and make your code more clean and readable.
for more information check React Functional Components VS Class Components
I revised your code, now it updates the state of value1 whenever the slider moves:
import React from 'react';
import { Text, View, Button } from 'react-native';
import Slider from '#react-native-community/slider';
import { TextInput } from 'react-native-paper';
const App = (props) =>{
const [value1 , setValue1] = React.useState(1)
return(
<View>
<Text>The value is : {value1}</Text>
<Slider
value={value1}
onValueChange={setValue1}
minimumValue={1}
maximumValue={5}
step={1}/>
</View>
);
}
export default App;
demo
No mood property in your code. So it is undefined.
Related
I have a real doozy here and I can't wrap my head around it.
I have this component:
<TouchableOpacity
onPress={() => {
if (myContext.value) {
alert('true');
//changes myContext.value to false
} else {
alert('false');
//changes myContext.value to true
}
}}>
<Text>{myContext.value ? 'working' : 'not working'}</Text>
</TouchableOpacity>
The weird thing that I don't understand is that the context IS changing the onPress function. So if I click the button it will alert true at first and then false and back and forth as expected. What's not changing is the text that should be going between "working" and "not working".
This component is definitely within the scope of my Provider. I'm using useContext to get access to myContext.
Does anyone know why this might be happening?
The point to be noted here is that just changing myContext.value = false or true Will not trigger a re-render.
I am not sure how are you handling the value change, But I've created a replica of what you want
Check out this Snack to see the working example.
Create a Context as shown below
import { createContext } from 'react';
const MyContext = createContext();
export default MyContext;
An example App.js component would look like
import * as React from 'react';
import { Text, View, TouchableOpacity } from 'react-native';
import Constants from 'expo-constants';
import MyContext from './MyContext';
import MyComponent from './MyComponent';
export default function App() {
const [value, setValue] = React.useState(true);
return (
<MyContext.Provider value={{ value, setValue }}>
<MyComponent />
</MyContext.Provider>
);
}
And your component where you want to perform this operation should look like this
import * as React from 'react';
import { Text, View, StyleSheet, TouchableOpacity } from 'react-native';
import Constants from 'expo-constants';
import MyContext from './MyContext';
export default function MyComponent() {
const myContext = React.useContext(MyContext);
return (
<TouchableOpacity
onPress={() => {
if (myContext.value) {
alert('true');
myContext.setValue(false);
//changes myContext.value to false
} else {
alert('false');
myContext.setValue(true);
//changes myContext.value to true
}
}}>
<Text>{myContext.value ? 'working' : 'not working'}</Text>
</TouchableOpacity>
);
}
I am learning ReactNative, and now I'm looking into how to organize the files (for now I am going to create a folder for each page, each with an index, functions and styles file). For some reason, though, I am not being able to import information to index.js, can't use the styles or functions, when I open the page, it doesn't return the func method.
I am wondering whether I am using import wrong. Using import { MenuFunctions} from './Menu' has resulted in an error saying nothing was imported, this error no longer appears, but nothing is being returned still.
This is my code, index, Menu and styles are all in the same folder.
index.js
import React from 'react';
import MenuFunctions from './Menu';
import MenuStyles from './styles'
import { Text, View } from 'react-native';
export default class MenuPage extends React.Component {
render(){
return(
<View>
<Text> Text: {MenuFunctions.func} </Text>
</View>
);
}
}
Menu.js
import React from 'react';
export default class MenuFunctions extends React.Component{
constructor(props){
super(props);
}
func = () => {return "Hello, World!"};
}
styles.js
import React from 'react';
import { StyleSheet } from 'react-native';
export default class MenuStyles extends React.Component{
styles = StyleSheet.create({
text: {
color: "red",
}
});
}
Menu.js and styles.js shouldn't be React.Component and you forgot to call to Func method, () is missing.
React.Component is a UI component only which include a render method that returns JSX element.
Your code should look like that:
index.js
import React from 'react';
import MenuFunctions from './Menu';
import MenuStyles from './styles';
import {Text, View} from 'react-native';
export default class MenuPage extends React.Component {
render() {
return (
<View>
<Text> Text: {MenuFunctions.func()} </Text>
</View>
);
}
}
Menu.js
import React from 'react';
class MenuFunctions {
func = () => {
return 'Hello, World!';
};
}
export default new MenuFunctions();
styles.js
import {StyleSheet} from 'react-native';
export default styles = StyleSheet.create({
text: {
color: Colors.red30,
}
});
The problem is that you are trying to import Menu.js using import MenuFunctions from './Menu' when you had to specify the file itself:'./Menu/Menu.js'. (remember to call the function using parentheses class.function())
Also, whenever you export as default you don't have to use curly braces {}
If you are wondering about your project structure, you can use the following as a common structure to create projects. Let's say you have the following
- index.js
- src
- assets
- screens
- MenuScreen
- components
- services
- menu
- index.js //this is Menu.js
- android
- ios
NOTE
Do not extend React.Component if you are not exporting a component.
You need an object to perform the function of the class you created.
Then declare and use the constructor.
index.js
import React from 'react';
import MenuFunctions from './Menu';
import MenuStyles from './styles'
import { Text, View } from 'react-native';
export default class MenuPage extends React.Component {
constructor(props){
super(props);
this.menu = new MenuFunctions()
MemuStyle = new MenuStyles()
}
render(){
return(
<View>
<Text style={MemuStyle.styles.text}> Text: {this.menu.func()}</Text>
</View>
);
}
}
Menu.js
import React from 'react';
export default class MenuFunctions extends React.Component {
func(){
return 'Hello, World!';
}
}
styles.js
import { StyleSheet } from 'react-native';
export default class MenuStyles extends React.Component {
styles = StyleSheet.create({
text: {
color: "red",
}
});
}
NOTE: The features you intend to use do not necessarily have to inherit React.
Hello i'm getting this error when tried to implement a header containing a logout button. The error i'm getting is to check the render method.But can't figure out the error.The file in which i'm getting error is the following
import React from "react";
import {
ScrollView,
View,
StyleSheet,
Image,
Text,
Button,
Title,
Header,
AsyncStorage,
Icon
} from "react-native";
import {
RkText,
} from "react-native-ui-kitten";
import Card from "./Card";
import CardSection from "./CardSection";
import Login from './Login';
export class GridV2 extends React.Component {
onPressLogout(){
AsyncStorage.removeItem(token);
}
render() {
return (
<View>
<Header style={{backgroundColor:'#B00000'}}>
<Button
transparent
onPress={() => this.onPressLogout()}
>
<Icon
style= {{color: '#ffffff', fontSize: 25, paddingTop:0}}
name="bars" />
</Button>
</Header>
<Card>
<CardSection>
</CardSection>
</Card>
</View>
);
}
}
I'm importing this GridV2 in my Login screen.Login screen is as follows. What is the mistake in this code?Please help..
import React, {Component} from 'react';
import { Container,
Title,
InputGroup,
Input,
Button,
Text,
View,
Spinner,
Item,
Label,
} from 'native-base';
import {
StyleSheet,
Image,
Navigator,
TouchableOpacity,
AsyncStorage,
Linking
} from 'react-native';
import QASection from './QASection';
import GridV2 from './grid2';
class Login extends Component{
state = { userdetail: [] };
constructor(props) {
super(props);
this.initialState = {
isLoading: false,
error: null,
username: '',
password: ''
};
this.state = this.initialState;
}
render() {
return();
}
You got your exports/imports wrong. Please remove all unused imports and check if the ones you are importing are in the package they are imported from. For example, as far as I know, there is no such thing as Header component in react-native (DOC
You should import GridV2 using named import:
import { GridV2 } from './grid2';
or export is as a default first:
export default class GridV2 extends React.Component {
Please check if your other imports are intact (you have correct filenames etc.).
This link explains exports/imports well.
Also you should not return like this return (); from render method. Instead return null like below:
return (null);
I am practicing React native. When I compile the following program, I am getting Cannot read property 'props' of undefined error for Details.js. Kindly let me know as to what went wrong here.
Layout.js
import React, {Component} from 'react';
import Header from './Header';
import Details from './Details';
export default class Layout extends React.Component {
constructor(props){
super(props);
this.state = {
heading: "Welcome no-name guy!",
header: "I am your header",
footer: "I am your footer"
};
}
render() {
return (
<div>
<Header headerprop={this.state.header} />
<Details detailprop={this.state.heading} />
</div>
);
}
}
Details.js
import React from 'react';
const Details = (detailprop) => {
return (
<div className="heading-style">{this.props.detailprop}</div>
);
};
Details.bind(this);
export default Details;
Header.js
import React, {Component} from 'react';
export default class Header extends React.Component {
render(){
return(
<div>{this.props.headerprop}</div>
);
}
}
In functional components, the props are passed as the first parameter. So, you only need to do this:
const Details = (props) => {
return (
<div className="heading-style">{props.detailprop}</div>
);
};
If you know the prop that you want to handle you can destructure that prop:
const Details = ({ detailProp }) => {
return (
<div className="heading-style">{detailprop}</div>
);
};
Your component argument should be props:
const Details = (props) => {
return (
<div className="heading-style">{props.detailprop}</div>
);
};
It could be detailprop as you have (or anything for that matter) but you would then need to access the prop by the confusing call:
detailprop.detailprop
props is the idiomatic approach for React.
Details.js is a stateless functional react component. https://facebook.github.io/react/docs/components-and-props.html
It receives props as its argument. You don't need this here.
import React from 'react';
const Details = (props) => {
return (
<div className="heading-style">{props.detailprop}</div>
);
};
Details.bind(this); // you don't need this
export default Details;
Also, div elements will not work for react-native . Please refer react native docs https://facebook.github.io/react-native/
I want to exetend Tab component with es6 class like this:
import React from "react";
import {Tab} from "material-ui";
class MyTab extends Tab {
constructor(props){
super(props);
}
render(){
return super.render();
}
}
export default MyTab;
But i get an error:
Uncaught TypeError: Cannot read property 'muiTheme' of undefined
What am I doing wrong?
The correct way to extend an MUI component is using their withStyles() higher-order component Design Approach
import React, { Component } from "react";
import Tab from "#material-ui/core/Tab";
import { withStyles } from "#material-ui/core/styles";
const styles = theme => {
return ({
myTab: {
fontFamily: 'Courier New',
});
}
class MyTab extends Component {
render() {
return (
const {classes, ...other} = this.props
<Tab {...other} className={classes.myTab} label="Home" />
}
}
export default withStyles(styles)(MyTab);
Currently it seems to require a 'getInitialState' function even if you are working in ES6. So just add one (and ignore the errors) for now.
import ThemeManager from 'material-ui/lib/styles/theme-manager';
import LightTheme from 'material-ui/lib/styles/raw-themes/light-raw-theme';
getInitialState() {
return this.state;
}
I also set this state in the constructor ala ES6 React.
this.state = {muiThem : ThemeManager.getMuiTheme(LightThem),};