I'm trying to access a state from another state in react native, like this way :
class Subcomponent extends React.Component {
constructor(props) {
super(props);
}
state = {
inputText : <TextInput value={this.state.counter}/>
counter: 0,
};
render(){
return (
<View>{this.state.inputText}</View>
)
}
}
export default Subcomponent;
And I get undefined, I also tried to do it with a string instead of an integer.
Is this just not possible ? Is there a way to do so?
You cannot access state to another state, but this works for you in this code.
class Subcomponent extends React.Component {
constructor(props) {
super(props);
}
state = {
counter: 0,
};
renderText(){
return(
<TextInput value={this.state.counter}/>
);
}
render(){
return (
<View>{this.renderText()}</View>
)
}
}
export default Subcomponent;
Related
I have a parent component like this:
class Parent extends Component {
onChangeState=()=>{
//I want to change it here
}
render(){
return(
<child />)
})
}
I want to change child component's state in parent. How can I do that ?
class Child extends Component {
constructor(props) {
super(props);
this.state = {
item: ''
};
}
}
In this case, you need to define the state in the parent and pass it as a prop to the child. Then, your parent has full control over the state and a state change will cause a rerender of the child and its prop will be updated. This yields in the same effect.
class Parent extends Component {
constructor(props) {
super(props);
this.state = { item: '' };
}
onChangeState = (newItem) => {
this.setState({ item: newItem })
}
return (
<Child state={this.state} />
)
}
class Child extends Component {
constructor(props) {
super(props)
}
render() {
return (
<Text>{this.props.state.item}</Text>
)
}
}
I would like to get the value of the switch inside ToggleCampus from Map.js. How can I update the value of the state inside Map.js from ToggleCampus.js?
Map.js
export default class Map extends React.Component{
constructor(props) {
super(props);
this.state = { switchVal: true};
}
render(){
return (
<ToggleCampus switchVal = {this.state.switchVal} />
);
}
}
ToggleCampus.js
export default class ToggleCampus extends React.Component {
constructor(props){
super(props);
}
render() {
console.log(this.props.switchVal);
return(
<Switch
value={this.props.switchVal}
*(not sure how to use onChange here)*
/>
);
}
}
So basically what you have to do is pass the function as props to ToggleCampus to update the switchVal. Like suppose in ToggleCampus you want to change the value on button click, so check the below method:
Map.js
export default class Map extends React.Component{
constructor(props) {
super(props);
this.state = { switchVal: true};
}
changeSwitch = (value) => {
this.setState({switchVal:value});
}
render(){
return (
<ToggleCampus changeSwitch={this.changeSwitch} switchVal = {this.state.switchVal} /> // passed changeSwitch
);
}
}
and in togglecampus.js
export default class ToggleCampus extends React.Component {
constructor(props){
super(props);
}
render() {
console.log(this.props.switchVal);
return(
<>
<Switch
value={this.props.switchVal}
*(not sure how to use onChange here)*
/>
<Button title="click" onPress={() => this.props.changeSwitch(false)} /> // added this
</>
);
}
}
hope it helps.
I'm passing a string value from one component class to another and try to update the state in another class
class Dashboard extends Component {
constructor(props) {
super(props);
this.state = {
systemDetailsData: null,
}
}
CalledFromHeader = (systemDetailsData11) => {
this.setState({ systemDetailsData:systemDetailsData11 })
}
}
class Header extends Component {
constructor(props) {
super(props);
Dashboard_Obj = new Dashboard();
}
OnPress = () => {
Dashboard_Obj.CalledFromHeader("system data");
}
}
I'm getting this error ---> Warning: Can't call setState on a component that is not yet mounted. This is a no-op, but it might indicate a bug in your application. Instead, assign to this.state directly or define a state = {}; class property with the desired state in the Dashboard component.
I want to update the state in Dashboard class using above code, Can anyone help me how to achieve this?
Call the Header component in Dashboard render method and pass a function as a prop to Header component.
class Dashboard extends Component {
constructor(props) {
super(props);
this.state = {
systemDetailsData: null,
}
}
CalledFromHeader = (systemDetailsData11) => {
this.setState({ systemDetailsData:systemDetailsData11 })
}
redner(){
return <Header changeState={this.CalledFromheader} />
}
}
class Header extends Component {
constructor(props) {
super(props);
}
render(){
return(
// something view onPress handler
<Button onPress={()=>{
this.props.CalledFromHeader('Some parameters')
}} />
)
}
}
i want to pass my params value in my custom component so below is my code
Header.js
class Header extends Component {
constructor(props) {
super(props);
}
render() {
return (
<View >
<Text >Title</Text>
<Text>subtitle</Text>
</View>
);
}
}
I call my Header.js from my main.js
class Main extends Component {
constructor(props) {
super(props);
}
render() {
return (
<Header title = {this.props.navigation.state.params.screen_title} subtitle= {this.props.navigation.state.params.subtitle} />
);
}
}
I pass my title and subtitle in my header component , i just wanted to know how can i access my passing variable value in my header component ? your all suggestions are appreciable
Its very simple You can access it by
this.props.title
this.props.subTitle
this.props.nameOfTheProps
How should I access the properties of an element without using the 'this' keyword in React Native? I have a function with which the parent class itself is bound as 'this' but I want to access the properties of the element that is being clicked. Here's the code-
import {Circle} from 'react-native-svg';
export default App extends Component {
constructor(props) {
super(props);
this.state = {activeX: null}
}
handleTouch(event) {
const x = event.target.cx; //How to access "cx" property here?
this.setState({ activeX: x });
}
render() {
return (
<Circle cx='10' cy='10' r='5' onPress={this.handleTouch.bind(this)}/>
<Circle cx='20' cy='20' r='5' onPress={this.handleTouch.bind(this)}/>
);
}
}
Try this
import {Circle} from 'react-native-svg';
export default App extends Component {
constructor(props) {
super(props);
this.state = {
activeX: null,
cx: 10
}
}
handleTouch = () => {
const x = this.state.cx
this.setState({ activeX: x });
}
render() {
return (
<Circle cx={this.state.cx} cy='10' r='5' onPress={this.handleTouch}/>
);
}
}
import ReactNativeComponentTree from'react-native/Libraries/Renderer/src/renderers/native/ReactNativeComponentTree';
And access the properties as-
const x = ReactNativeComponentTree.getInstanceFromNode(event.currentTarget)._currentElement.props.cx;
Sorry for leaving an answer but I cannot leave a comment since <50 rep.
You should edit the improve part of your answer, with the following bit:
import ReactNativeComponentTree from 'react-native';
instead of what you have right now,
import ReactNativeComponentTree from'react-native/Libraries/Renderer/src/renderers/native/ReactNativeComponentTree';
since is throwing an error (trying to import unknown module).
A better way of accessing the component properties in an event is actually by creating a component and passing it the needed data:
import { Circle } from 'react-native-svg';
class TouchableCircle extends React.PureComponent {
constructor(props) {
super(props);
this.circlePressed = this.circlePressed.bind(this);
}
circlePressed(){
this.props.onPress(this.props.cx);
}
render() {
return (
<Circle cx={this.props.cx} cy={this.props.cy} r={this.props.r} onPress={this.circlePressed}/>
);
}
}
export default App extends Component {
constructor(props) {
super(props);
this.state = {activeX: null}
this.handleTouch = this.handleTouch.bind(this);
}
handleTouch(cx) {
this.setState({ activeX: cx });
}
render() {
return (
<TouchableCircle cx='10' cy='10' r='5' onPress={this.handleTouch}/>
<TouchableCircle cx='20' cy='20' r='5' onPress={this.handleTouch}/>
);
}
}
NB: Performance tip from Facebook for event handlers:
We generally recommend binding in the constructor or using the property initializer syntax, to avoid this sort of performance problem. (i.e. to avoid the creation of the callback everytime a component renders)
ref: React Handling Events
(credits to https://stackoverflow.com/a/42125039/1152843)
You can change your event handler to a curried function like so:
import {Circle} from 'react-native-svg';
export default App extends Component {
constructor(props) {
super(props);
this.state = {activeX: null}
}
//Use ES6 arrow and avoid this.bind
//Curried function handleTouch accepts cx, cy as extra parameters
handleTouch = (cx, cy) => event => {
console.log(cx, cy) // This is how you access props passed to Circle here
console.log(event)
this.setState({ activeX: cx });
}
render() {
//You are actually invoking the handleTouch function here, whose return value is
//a function, which is set as the onPress event handler for the <Circle> component
return (
<Circle cx='10' cy='10' r='5' onPress={this.handleTouch(10, 10)}/>
<Circle cx='20' cy='20' r='5' onPress={this.handleTouch.(20, 20)}/>
);
}
}
Checkout the working snack below:
https://snack.expo.io/#prashand/accessing-props-from-react-native-touch-event