Rendering specific component using switch case --- React

Question

My requirement is to render components based on user selection. I have a left nav on click of which I am trying to render the component associated with it but I am getting error:

Error:

Functions are not valid as a React child. This may happen if you return a Component instead of from render. Or maybe you meant to call this function rather than return it.

My code goes as under:

------ManageData.js-------

import React, {
    Component
} from 'react';
import NestedList from '../Left-nav/leftnav';
import '../Left-nav/leftnav.css';
import AddCarousel from '../addCarousel/addCarousel';
import AddClass from '../addClass/addClass';
import './manageData.css';

class ManageData extends Component {
    loadComponent = null;
    constructor(props) {
        super(props);
        this.state = {
            showChild: 1
        };
        //this.generateComponent = this.generateComponent.bind(this);
    }

    loadComponents = (data) => {
        console.log(data, this.state);
        if (data == 'AddClass') {
            this.setState({
                showChild: 2
            }, () => {

                console.log('state changed-----', this.state)
                //this.generateComponent(data, this.state);
            })
        }

    }




    render() {
        const showItem = this.state.showChild;


        return (

            <section className = "Admin-add-video">
            <div className="row">

            <div className = "col-3 set-padding" > < NestedList loadComponents = {this.loadComponents}/>
            </div >
            <div className = "col-9 set-ht" >
             { this.state.showChild == 1 && <AddCarousel/> }
              {this.state.showChild == 2 && <AddClass/>}

            </div>


            </div>
            </section>

        );
    }
}


export default ManageData;

Nested List is the separate component on click of its item I am getting the value and trying to setState().

I have tried everything from this url : using switch statement for react rendering But for all the cases I am getting same error.

May be I am missing anything. Any help will be highly appreciated.

It looks like the problem is with AddClass component. Pl double check it is exported correctly. — Dinesh Pandiyan
– Dinesh Pandiyan, Commented Nov 24, 2018 at 6:06
@Dinesh you were right I was not exporting the component properly. Thanks for the help — Amit
– Amit, Commented Nov 24, 2018 at 6:24

Dinesh Pandiyan · Accepted Answer · 2018-11-24 06:28:58Z

1

It looks like the problem is with AddClass component. Pl double check if it is exported correctly.

Note: Posting this answer from my comment on the question as it fixed OP's error.

answered Nov 24, 2018 at 6:28

Dinesh Pandiyan

6,3293 gold badges36 silver badges50 bronze badges

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

Comments

Alejandro Lariccia · Accepted Answer · 2018-11-24 06:10:08Z

Try this in the render method:

render() {
        const { showChild } = this.state;

        const renderChilds = () => {
            switch(showChild) {
                case 1:
                    return <AddCarousel />;
                case 2:
                    return <AddClass />;
                default:
                    return <div />;
            }
        };

        return (
            <section className="Admin-add-video">
                <div className="row">
                    <div className = "col-3 set-padding">
                        < NestedList loadComponents={this.loadComponents} />
                    </div >
                    <div className = "col-9 set-ht" >
                        {renderChilds()}
                    </div>
                </div>
            </section>
        );
    }

Collectives™ on Stack Overflow

Rendering specific component using switch case --- React

2 Answers 2

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Linked

Related