CODEWITHSUNDEEP
javascripthtmlreactjsredux
js_248
js_248

Reputation: 2112

Calling Multiple component in same page in React.js

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.

Upvotes: 1

Views: 3963

Answers (1)

Zhang Chao
Zhang Chao

Reputation: 757

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>
    );
}

Upvotes: 3

Related Questions