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
Related
I am just getting started with React native and I came across a rather unexpected bug. Consider the code below
export default class RecipePage extends Component {
state = {
ingredients: ["apple", "orange"]
}
render() {
return (
<View>
<ShowRecipes ingredients={this.state.ingredients} />
</View>
)
}
}
class ShowRecipes extends Component {
render() {
return (
<View>
<Text>This is inside ShowRecipes</Text>
</View>
)
}
}
export default ShowRecipes
I get an error below which points to <ShowRecipes ingredients={this.state.ingredients} />
"TypeError: undefined is not an object"
I am getting this error and I am not able to figure out what's causing it. Can someone please help fix this mistake.
Any help is appreciated.
You should put State in the contructor to get like this this.state.something
Try this code.
export default class RecipePage extends Component {
constructor(props) {
super(props)
this.state = {
ingredients: ["apple", "orange"]
}
}
}
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;
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 am trying to alert this.state.name but unfortunately, It shows cant read property name error
export default class SignUp extends Component {
constructor(props) {
super(props);
this.state = {
Pro: [],
name:'g',
phone:'',
pass:'',
}}
registerUser(){
alert(this.state.name)}
render(){
return(
<TouchableOpacity onPress={this.registerUser} style={styles.buttonContainer}
onPress={this.registerUser}>})}
do this:
registerUser =()=>{
alert(this.state.name)}
and in <TouchableOpacity>:
onPress={()=>{this.registerUser()}}
it will work!