In the following React Native scenario, how can I pass the variable userId from the 'parent' component to the 'child' component?
I have a 'parent' component like so:
export class UserProfileScreen extends React.Component {
constructor(props) {
super(props);
this.state = {
userId: 123,
}
}
render() {
return(
<View>
<UserIntro />
</View>
)
}
}
And a 'child' component like so:
export class UserIntro extends React.Component {
render() {
return(
<View>
<Text>Introduction for user {userId}</Text>
</View>
)
}
}
export class UserProfileScreen extends React.Component {
constructor(props) {
super(props);
this.state = {
userId: 123,
}
}
render() {
return(
<View>
<UserIntro id={this.state.userId} />
</View>
)
}
}
export class UserIntro extends React.Component {
render() {
return(
<View>
<Text>Introduction for user {this.props.id}</Text>
</View>
)
}
}
You can pass anything(JSON object,JSON Array,simple arrays,float and even function etc) from parent to child using props. There is no limit of props number.
you can execute parent function from child as well using props
export class UserProfileScreen extends React.Component {
constructor(props) {
super(props);
this.state = {
userId: 123
};
}
getUpdatedUserID = updatedId => {
this.setState({userId:updatedId});
alert(updatedId);
};
render() {
return (
<View>
<UserIntro id={this.state.userId} getUpdatedUserID={this.getUpdatedUserID} />
</View>
);
}
}
export class UserIntro extends React.Component {
updateUserId=()=>
{
this.props.getUpdatedUserID((int)(this.props.id)+1);
}
render() {
return (
<View>
<Text>Introduction for user {this.props.id}</Text>
<Button onPress={this.updateUserId} />
</View>
);
}
}
Related
Here is my code,
This code is working fine use "setState" to set new variable in componentDidMount tag.
export default class App extends React.Component {
constructor(props){
super(props);
this.state = {
name: "peter",
}
}
componentDidMount(){
this.setState({name:"sam"});
}
render(){
return (
<View>
<Text>
{this.state.name}
</Text>
</View>
)
}
}
But I want to create a new function to set it.
export default class App extends React.Component {
constructor(props){
super(props);
this.state = {
name: "peter",
}
}
changename(){
this.setState({name:"sam"});
}
render(){
this.changename();
return (
<View style={styles.container}>
<Text style={styles.paragraph}>
{this.state.name}
</Text>
</View>
)
}
}
It displays
Minified React error #185;
Error
componentDidMount is work,
but it is not working on my own function tag
any idea how to fix it
Thank you very much.
You have put an unconditional state change in render. Because of that your render triggers a state change which triggers a re-render which again triggers a state change - An infinite loop.
You could put some sort of condition on which to trigger a state change for example:
export default class App extends React.Component {
constructor(props){
super(props);
this.state = {name: "peter"}
}
changename(){ this.setState({name:"sam"}); }
render(){
if(this.state.name==='peter')
this.changename();
return (
<View>
<Text>{this.state.name}</Text>
</View>
)
}
}
Why does the following code not work? In this test I simply try to show a state of the component Board, when the Button is clicked. But I get a TypeError: undefined is not an object.
var board = (<Board/>);
return (
<View>
{ board }
<Button
title="Press me"
onPress={() => Alert.alert(board.state.lastRefresh)}
/>
</View>
);
};
The Board component has this constructor:
constructor(props) {
super(props)
this.state = {
lastRefresh: Date(Date.now()).toString(),
}
...
If your Board component is something like this:
import PageTwo from 'PageTwo';
export default class Board extends React.Component {
constructor(props) {
super(props);
this.state = {
lastRefresh: Date(Date.now()).toString(),
}
}
render() {
return (
<View>
<PageTwo lastRefresh={this.state.lastRefresh}>
</PageTwo>
</View>
)
}
}
You can access your props by this way from PageTwo component:
export default class PageTwo extends React.Component {
render() {
return (
<View>
<Button
title="Press me"
onPress={() => Alert.alert(this.props.lastRefresh)}
/>
</View>
)
}
}
export default class App extends Component<Props> {
constructor() {
super();
this.state = {
value: "Edit me!"
};
this.handleChangeText = this.handleChangeText.bind(this);
}
handleChangeText(newText) {
this.setState({
value: newText
});
}
render() {
return (
<View style={styles.container}>
<TextInput style={styles.editText}
onChange={this.handleChangeText}/>
<Text>hello {this.state.value}</Text>
</View>
);
}
I am new to react native. I am getting error on hello {this.state.value} line. How can i solve this. Please help me
Can you try this?
export default class App extends Component<Props> {
constructor(Props) {
super(props);
this.state = {
value: "Edit me!"
};
}
handleChangeText = (newText) => {
this.setState({
value: newText
});
}
render() {
return (
<View style={styles.container}>
<TextInput
style={styles.editText}
onChangeText={this.handleChangeText}
/>
<Text>hello {this.state.value}</Text>
</View>
);
}
}
I'm trying do show a modal screen with a button, when i press the button the modal will appears. The variable that is responsable for it is modalVisible and its a variable state. But if my button is not in the same class of my screen Profile i'm not able to change the variable, at last i dont know a way to do:
class Carrousel extends React.Component {
render () {
return (
<Button
title= 'press me to show up'
onPress= {() => this.props.visible = true}
/>
);
}
}
export default class Profile extends React.Component {
constructor(props) {
super(props);
this.state = {
modalVisible: true,
};
}
render() {
return (
<View>
<Modal
visible = {this.state.modalVisible}>
</Modal>
<Carrousel visible = {this.state.modalVisible}/>
</View>
);
}
}
Is there an way to change this variable modalVisible in another class? Or is there another way to i show the modal with a button in another class?
*The carrousel class is another file Carrousel.js.
You have to set a function as a prop that changes the state on the Parent Component. I haven't tried but it should be something like this:
class Carrousel extends React.Component {
render () {
return (
<Button
title= 'press me to show up'
onPress= {() => this.props.setVisible()}
/>
);
}
}
export default class Profile extends React.Component {
constructor(props) {
super(props);
this.state = {
modalVisible: false,
};
this.setVisible = this.setVisible.bind(this);
}
setVisible() {
this.setState({
modalVisible: true,
})
}
render() {
return (
<View>
<Modal
visible = {this.state.modalVisible}>
</Modal>
<Carrousel setVisible={this.setVisible}/>
</View>
);
}
}
How can I access class functions from inside stack navigator header? Is this possible?
What I'm trying to achieve is to call a function when I press the stack navigator header title.
class Dashboard extends React.Component {
static navigationOptions = ({ navigation }) => {
return {
headerTitle: (
<View style={header.addressView}>
<Text
style={header.titleAddress}
onPress={() => {
this._show().bind(this);
}}>
/>
</View>
),
};
};
_show(){
this.setState({ visibleModal: 1 })
}
constructor(props) {
super(props);
this.state = {
visibleModal: null,
};
}
render() {
...........
}
}
export default Dashboard;
class Dashboard extends React.Component {
static navigationOptions = ({ navigation }) => {
const showParams = navigation.getParam("show",()=>{});
//Access the params like this.
return {
headerTitle: (
<View style={header.addressView}>
<Text
style={header.titleAddress}
onPress={showParams}>
/>
</View>
),
};
};
_show(){
this.setState({ visibleModal: 1 })
}
//Too add this.
componentDidMount(){
this.props.navigation.setParams({show:()=>this._show()});
}
constructor(props) {
super(props);
this.state = {
visibleModal: null,
};
}
render() {
...........
}
}
export default Dashboard;
This is how you access the variables or states inside a class and make it available for the static navigationOptions function.
Reference