React render method not called for nested component

Question

I have these React classes

class App extends React.Component {

    constructor(props) {
        super(props);
    }

    componentDidMount() {
        const { dispatch } = this.props;
        var props = this.props;
        dispatch(fetchDistricts('California'));
    }

    render() {
        return (
            <div class="app">
                <Chart width={this.props.width}
                    height={this.props.height}>
                <Bar data={this.props}
                    width={this.props.width}
                    height={this.props.height}>
                </Bar>
                </Chart>
            </div>
        );
    }
};

Chart looks like this

export default class Chart extends React.Component {
    render() {
        return (
            <svg width={this.props.width} 
                height={this.props.height}>
            </svg>
        );
    }
};

And Bars looks like this

export default class Bar extends React.Component {
    shouldComponentUpdate(nextProps) {
        debugger
        return this.props.data !== nextProps.data;
    }

    render() {
        debugger
        let props = this.props;
        let data = props.data.map((d) =>
            {
                return d.y;
            }
        );

        let yScale = d3.scale.linear()
            .domain([0, d3.max(data)])
            .range([0, this.props.height]);

        let xScale = d3.scale.ordinal()
            .domain(d3.range(this.props.data.length))
            .rangeRoundBands([0, this.props.width], 0.05);
        let bars = data.map((point, i) => {
            var height = yScale(point),
            y = props.height - height,
            width = xScale.rangeBand(),
            x = xScale(i);

            return (
                <Rect height={height}
                    width={width}
                    x={x}
                    y={y}
                    key={i}>
                </Rect>
            );
        });

    return (
        <g>{bars}</g>
    );
    }
};

the debuggers in Bars aren't called - the render method is not called.

Why?

danbahrami · Accepted Answer · 2015-10-05 06:44:31Z

6

Only top level components are actually rendered in the render method. When you put your Bar component inside your Chart component you're actually just passing Bar as a property of Chart.

React allows you to access this as this.props.children of your Chart component. So the render method of your chart component should be...

render() {
    return (
        <svg>
            {this.props.children}
        </svg>
    )
}

Further reading: https://facebook.github.io/react/docs/multiple-components.html

edited Oct 5, 2015 at 6:44

answered Oct 5, 2015 at 6:26

danbahrami

1,0321 gold badge9 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React render method not called for nested component

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related