CODEWITHSUNDEEP
reactjsreact-nativereact-redux
Taras Danylchenko
Taras Danylchenko

Reputation: 347

Pass props from Parent to child component

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.

Upvotes: 2

Views: 9885

Answers (2)

karthik
karthik

Reputation: 148

What Karl mentioned about passing state is right, but there is a problem in the child component too.

In your child component - replace this.props.state.xxxx with this.props.xxxx where xxxx is your email/first_name/image.

This should solve the problem.

(Optional suggestion: If you want to make even simpler - map your child state with the parent props so you can change and feed the parent back if required)

Here is a code sandbox for reference: https://codesandbox.io/embed/9o4vqy4104?module=%2Fsrc%2FuserBlock.js

Upvotes: 0

Karl Taylor
Karl Taylor

Reputation: 5279

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'

Upvotes: 9

Related Questions