Tyler Zika Tyler Zika - 4 years ago 124
React JSX Question

Why does the child component have more props than the parent?

I have a parent component that I want to be tabs for multiple children. For some reason, my child component has more props data than the parent.

Parent component

import React, { Component} from 'react';
import { Link } from 'react-router';
import { connect } from 'react-redux';

class TerritoryTabs extends Component {

componentWillMount() {
console.log('this is the parent props (tabs)')
console.log(this.props);
}

render() {
return (

{this.props.children}

);
}

}

export default connect(null, null)(TerritoryTabs);


Child component

import React, { Component} from 'react';
import { Link } from 'react-router';
import { connect } from 'react-redux';
import { reduxForm } from 'redux-form';

import { getTerritoryGeographies } from '../actions/index';

import TerritoryTabs from './territory-tabs';

class TerritoryGeographyList extends Component {

componentWillMount() {
console.log('this is child props (TerritoryGeographyList)');
console.log(this.props);
this.props.getTerritoryGeographies(this.props.params.id);
}

render() {
return (
<TerritoryTabs>

<div>This list goes here</div>

</TerritoryTabs>
);
}
}

function mapStateToProps(state) {
return { territoryGeographies: state.territoryGeographies.all
};
}

export default connect(mapStateToProps, { getTerritoryGeographies })(TerritoryGeographyList);


Here is what the console prints.

enter image description here

Answer Source

The wrap component should be called "parent". Example:

<Parent>
    <Child />
</Parent>

So, in your case, fix this line:

class TerritoryTabs extends Component {

  componentWillMount() {
    console.log('this is the child props (tabs)') // <-- Fix this line, it should be the "child"
    console.log(this.props);
  }

and this line:

class TerritoryGeographyList extends Component {

  componentWillMount() {
    console.log('this is parent props (TerritoryGeographyList)'); // <-- fix this line, it should be "parent"
    console.log(this.props);
    this.props.getTerritoryGeographies(this.props.params.id);
  }
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download