material-ui <SelectField> Items are not showing in ReactJS

Question

material-ui Items are not showing. I want to show categories of products in SelectField but its not working. whwn I click on selectfield it does not show any item All code of my component is given below

import React, { Component } from 'react'
import RaisedButton from 'material-ui/RaisedButton';
import TextField from 'material-ui/TextField';
import SelectField from 'material-ui/SelectField';
import MenuItem from 'material-ui/MenuItem';

const style = {
    padding: '10px',
    textAlign: 'center'
};

const categories = ["mobile","laptop","camera"];

class AddProduct extends Component {
    constructor(props) {
        super();
        this.state = {
            productName: '',
            productCategory: '',
        }
        this.submit = this.submit.bind(this);
        this.inputHandler = this.inputHandler.bind(this);
    }

    inputHandler(e) {
        this.setState({
            [e.target.name]: e.target.value
        })
    }

handleChangeCategory = (event, index, value) => {this.setState({productCategory:value}); console.log("value", value)}

    render() {
        return (
            <div ><center>
                <h1>Add Product for Auction</h1>
                <form onSubmit={this.submit} >
                    <br />
                    <br />
                   <SelectField
          floatingLabelText="Catogory"
          value={this.state.productCategory}
          onChange={this.handleChangeCategory}
        >
          <MenuItem value={"mobile"} primaryText="Mobile" />
          <MenuItem value={"laptop"} primaryText="Laptop" />
          <MenuItem value={"camera"} primaryText="Camera" />
        </SelectField><br />
                    <br />

                    <TextField
                        type="text"
                        hintText="Product Title"
                        name="productName"
                        value={this.state.productName}
                        floatingLabelText="Product Title"
                        onChange={this.inputHandler}
                    />
                    <RaisedButton type="submit" label="Add Product" primary={false} secondary={true} /> <br /><br />
                </form>
            </center>
            </div>
        );
    }
}

export default AddProduct;

Answer 1

You haven't defined the function submit and according to your code you are trying to bind it.

this.submit = this.submit.bind(this);

define the function submit

   submit(){
    // do something
      }

And try to use ES6 fat arrow functions so you dont have to bind each and every function, like you have done in the above code.

Try something like this (using ES6 fat arrows)

import React, { Component } from 'react'
import RaisedButton from 'material-ui/RaisedButton';
import TextField from 'material-ui/TextField';
import SelectField from 'material-ui/SelectField';
import MenuItem from 'material-ui/MenuItem';

const style = {
    padding: '10px',
    textAlign: 'center'
};

const categories = ["mobile","laptop","camera"];

class AddProduct extends Component {
    constructor(props) {
        super();
        this.state = {
            productName: '',
            productCategory: '',
        }

    }

    submit =()=>{

    }

    inputHandler =(e)=> {
        this.setState({
            [e.target.name]: e.target.value
        })
    }

handleChangeCategory = (event, index, value) => {this.setState({productCategory:value}); console.log("value", value)}

    render() {
        return (
            <div ><center>
                <h1>Add Product for Auction</h1>
                <form onSubmit={this.submit} >
                    <br />
                    <br />
                   <SelectField
          floatingLabelText="Catogory"
          value={this.state.productCategory}
          onChange={this.handleChangeCategory}
        >
          <MenuItem value={"mobile"} primaryText="Mobile" />
          <MenuItem value={"laptop"} primaryText="Laptop" />
          <MenuItem value={"camera"} primaryText="Camera" />
        </SelectField><br />
                    <br />

                    <TextField
                        type="text"
                        hintText="Product Title"
                        name="productName"
                        value={this.state.productName}
                        floatingLabelText="Product Title"
                        onChange={this.inputHandler}
                    />
                    <RaisedButton type="submit" label="Add Product" primary={false} secondary={true} /> <br /><br />
                </form>
            </center>
            </div>
        );
    }
}

export default AddProduct;