I hava a Parent class
import React, { Component } from 'react';
import { View, TouchableOpacity, Text, ListView } from 'react-native';
import Profile from './UserBlock';
export default class ControlPanel extends Component {
constructor(props){
super(props)
console.log(this.props)
this.state = {
email: "[email protected]",
first_name: "User",
image : '../img/user.png'
}
}
render() {
return(
<View style={{backgroundColor:'rgba(255,255,255,0.93)', flex:1,}}>
<Profile {...this.props} />
</View>)
}
}
And child component
import React, { Component } from 'react';
import { View, Text, Image } from 'react-native';
export default class UserBlock extends Component {
constructor(props){
super(props)
this.state = {}
}
render() {
return(
<View style={{flexDirection:'row', padding:10}}>
<Image source ={{uri : this.props.state.image}} resizeMode="contain" style={{margin:15, width:60, height:60, borderRadius:30}} />
<View style ={{justifyContent:'center', margin:15}}>
<Text style={{fontWeight:'700', fontSize:25, color:'#444'}}>{this.props.state.first_name}</Text>
<Text style={{fontWeight:'200', color:'#999'}}>{this.props.state.email}</Text>
</View>
</View>)
}
}
But when im trying to read parent props i have a error "TypeError: undefined is not an object"
But it seemed to me that I was doing everything right.
You are not passing the props down to the child component correctly.
What you are doing is using the spread operator to pass down multiple key/values, but if your props are empty, then nothing will get passed.
<Profile {...this.state} />
is the same as
<Profile
email={this.state.email}
first_name={this.state.first_name}
image={this.state.image}
/>
To get the parent state into the child component you need to do:
<Profile {...this.state} />
Then in your child component
console.log(this.props) // would log:
// email: "[email protected]"
// first_name: "User"
// image : '../img/user.png'
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments