CODEWITHSUNDEEP
reactjs
Dumisani
Dumisani

Reputation: 89

Struggling to solve a warning that appears when I try to create an element

Please help me understand what I am doing wrong, and a suggestion on how to approach this would be appreciated. I am trying to create a material drop down menu using the years array however I am getting the error above

React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object

My code is below

 render(){
        const currentYear = (new Date()).getFullYear();

        const years = [];
        for(let i = currentYear - 100; i < currentYear - 15; i++)
            years.push(i);
        years.map((year) => {
            return React.createElement(<MenuItem/>)
        })

        return(
            <div>
                <p>Date Of Birth</p>
                <DropDownMenu
                    value={this.state.year}
                    onChange={(e, i, value) => this.handleChange('year', value)}>
                    <MenuItem value={1} primaryText="Year" />
                </DropDownMenu>

                <DropDownMenu
                    value={this.state.month}
                    onChange={(e, i, value) => this.handleChange('month', value)}
                >
                    <MenuItem value={1} primaryText="Month" />
                    <MenuItem value={this.state.month} primaryText={this.state.month}/>
                </DropDownMenu>

                <DropDownMenu
                    value={this.state.day}
                    onChange={(e, i, value) => this.handleChange('day', value)}
                >
                    <MenuItem value={1} primaryText="Day" />
                    <MenuItem key="day" value={this.state.day} primaryText={this.state.day} />
                </DropDownMenu>
            </div>
        )
    }
}

export  default  DateOfBirth

Upvotes: 0

Views: 37

Answers (2)

JiN
JiN

Reputation: 828

I believe you are trying to make a Date Input Component.. Have a look at the code for having just year input in a dropdown.

    const years = [];
    for(let i = currentYear - 100; i < currentYear - 15; i++) {
        years.push(
        <MenuItem value={i} key={i} primaryText={i}
        );
    }

    return(
        <div>
            <p>Date Of Birth</p>
            <DropDownMenu
                value={this.state.year}
                onChange={(e, i, value) => this.handleChange('year', 
             value)}>
                {years}
            </DropDownMenu>
        </div>
    )
    }
  }

  export  default  DateOfBirth;

Upvotes: 1

Michael Peyper
Michael Peyper

Reputation: 6944

The error is caused by this line:

years.map((year) => {
    return React.createElement(<MenuItem/>)
})

There is no need to use createElement when using jsx syntax, so you can simply change this line to:

years.map((year) => {
    return <MenuItem/>
})

Upvotes: 0

Related Questions