在React.js的同一页面中调用多个组件

Question

I am creating a react main page which is rendering two react component as

render() {
    return (
        <Header />             
        <Test />
    );
}

Header is having simple static content.In Test I am calling external api using redux on page page load as

componentWillMount() {
    if (this.props.onPageLoadTest) {
        this.props.onPageLoadTest();
    }
}
render() {
    const { data } = this.props;
    return (
        <div>
            {
                data.map((a) => (

                    <div key={a.id}>{a.id}

                    </div>

                ))
            }
        </div>
    );
}

Using props I am showing content in Test component.Header and Test are working fine when I am rendering them separately.
When I am trying to combine then only Header is showing but Test is not able to fetch data from API.

Answer 1

You can't do things like this:

render() {
    return (
        <Header />             
        <Test />
    );
}

there can be only one markup in the return of render()

if you want to render the Header and Test together here, you have to wrap them with one markup,like this:

render() {
    return (
        <div>
            <Header />             
            <Test />
        </div>
    );
}