React - How do a I set the Dropdown Menu state onChange()?

Question

I am trying to bind the onChange event of the dropdown menu to set the value to the selection. At the moment I can pass a reference to call handleChange. However since I don't know how to bind the dropdownmenu object to the this. I can't access this.state

Maybe my code structure need to shift to something like the demo: http://www.material-ui.com/#/components/dropdown-menu

However, if i do that, how would I pass in documentList?

So confused. Gratefully appreciate a little support.

import React from 'react';
import { ListGroup, Alert, Row, Col} from 'react-bootstrap';
import Paper from 'material-ui/Paper';
import TextField from 'material-ui/TextField';
import FlatButton from 'material-ui/FlatButton';
import RaisedButton from 'material-ui/RaisedButton';
import SelectField from 'material-ui/SelectField';
import MenuItem from 'material-ui/MenuItem';
import DropDownMenu from 'material-ui/DropDownMenu'


const handleChange = (event, index, value) =>
{
console.log("handle change (value) ", value);
console.log("handle change (event) ", event);
console.log("handle change (index) ", index);

//How do i set the state of the dropdown object?


}

export const widget = ({ documentList }) => (
documentList.length > 0 ? <Paper style={{ paddingTop: 16,
        paddingBottom: 16,
        marginTop: 3,
        }}>
                            <form style={{ padding: 30 }} className="add-update-form" onSubmit={() => false}>
                                <Row>
                                    <Col md={2}>
                                        <DropDownMenu value={2} onChange={handleChange} openImmediately={true}>
                                            <MenuItem value={1} primaryText="Starter" />
                                            <MenuItem value={2} primaryText="Mains" />
                                            <MenuItem value={3} primaryText="Drinks" />
                                        </DropDownMenu>
                                    </Col>
          </Row>

Answer 1

The component that you wrote is a stateless functional component, which is supposed to work just like a normal function. There is no state object in this case. You will need a class constructor in order to have access to the state object in your component.

import React from 'react';
import { ListGroup, Alert, Row, Col} from 'react-bootstrap';
import Paper from 'material-ui/Paper';
import TextField from 'material-ui/TextField';
import FlatButton from 'material-ui/FlatButton';
import RaisedButton from 'material-ui/RaisedButton';
import SelectField from 'material-ui/SelectField';
import MenuItem from 'material-ui/MenuItem';
import DropDownMenu from 'material-ui/DropDownMenu';


class Widget extends React.Component {
constructor(props) {
    super(props);
  }

handleChange(event, index, value) {
  console.log("handle change (value) ", value);
  console.log("handle change (event) ", event);
  console.log("handle change (index) ", index);
  //Set States

}

render() {
   const documentList = this.props.documentList;
   //ES6 object destructing
   // const { documentList } = this.props;
  return() {
    if(!documentList.length > 0) return;
    <div>
     <Paper style={{ paddingTop: 16,
        paddingBottom: 16,
        marginTop: 3,
        }}>
      <form style={{ padding: 30 }} className="add-update-form" onSubmit={() => false}>
          <Row>
              <Col md={2}>
                  <DropDownMenu value={2} onChange={handleChange} openImmediately={true}>
                      <MenuItem value={1} primaryText="Starter" />
                      <MenuItem value={2} primaryText="Mains" />
                      <MenuItem value={3} primaryText="Drinks" />
                  </DropDownMenu>
              </Col>
          </Row>
    </div>
  }
}
}

export default Widget;

---

This is the current version of Widget.js

import React from 'react';
import { ListGroup, Alert, Row, Col} from 'react-bootstrap';
import Paper from 'material-ui/Paper';
import TextField from 'material-ui/TextField';
import FlatButton from 'material-ui/FlatButton';
import RaisedButton from 'material-ui/RaisedButton';
import Snackbar from 'material-ui/Snackbar';
import SelectField from 'material-ui/SelectField';
import MenuItem from 'material-ui/MenuItem';
import DropDownMenu from 'material-ui/DropDownMenu'
import Toggle from 'material-ui/Toggle';





class Widget extends React.Component {
    constructor(props) {
        super(props);
    }

    handleChange(event, index, value) {
        console.log("handle change (value) ", value);
        console.log("handle change (event) ", event);
        console.log("handle change (index) ", index);
        //Set States
    }

    styles = {
        block: {
            maxWidth: 250,
        },
        toggle: {
            marginBottom: 16,
        },
        thumbOff: {
            backgroundColor: '#ffcccc',
        },
        trackOff: {
            backgroundColor: '#ff9d9d',
        },
        thumbSwitched: {
            backgroundColor: 'red',
        },
        trackSwitched: {
            backgroundColor: '#ff9d9d',
        },
        labelStyle: {
            color: 'red',
        },
        customWidth: {
            width: 200,
        },
    };


    render() {
        const documentList = this.props.documentList;
        return () => {
            documentList.length > 0 ?
                <Paper style={{
                    paddingTop: 16,
                    paddingBottom: 16,
                    marginTop: 3,
                }}>
                    <form style={{padding: 30}} className="add-update-form" onSubmit={() => false}>
                        <Row>
                            <Col md={2}>
<DropDownMenu value={2} onChange={this.handleChange} openImmediately={true}>
                          <MenuItem value={1} primaryText="Starter" />
                          <MenuItem value={2} primaryText="Mains" />
                          <MenuItem value={3} primaryText="Drinks" />
                      </DropDownMenu>
                            </Col>
                            <Col md={2}>
                                <Toggle
                                    label="Dessert"
                                    labelPosition="right"
                                    style={this.styles.toggle}
                                />
                            </Col>
                        </Row>
                        <RaisedButton label="Save" primary={true} style={{marginRight: 15, marginTop: 15}} onClick=""/>
                    </form>
                </Paper> :
                <Alert bsStyle="warning">No stuff yet.</Alert>
        }

    }
}



Widget.propTypes = {
    documentList: React.PropTypes.array,
};

export default Widget;

Answer 2

Haven't got a clue why, but managed to get the pages to render. So though i would share the solution..... I think it's soomething to do with prp types and maybe the version of reat i'm using... "react": "^15.6.1", might upgrade later when i get a moment and see what happens. However the page renders so I am happy. Just need to fix the event handling.

import React from 'react';
import { ListGroup, Alert, Row, Col} from 'react-bootstrap'; 
import Paper from 'material-ui/Paper';
import TextField from 'material-ui/TextField';
import FlatButton from 'material-ui/FlatButton';
import RaisedButton from 'material-ui/RaisedButton';
import Snackbar from 'material-ui/Snackbar';
import SelectField from 'material-ui/SelectField';
import MenuItem from 'material-ui/MenuItem';
import DropDownMenu from 'material-ui/DropDownMenu'
import Toggle from 'material-ui/Toggle';





export class OrderWidget extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            toggle: true,
        },

            this.styles = {
                block: {
                    maxWidth: 250,
                }
                ,
                toggle: {
                    marginBottom: 16,
                }
                ,
                thumbOff: {
                    backgroundColor: '#ffcccc',
                }
                ,
                trackOff: {
                    backgroundColor: '#ff9d9d',
                }
                ,
                thumbSwitched: {
                    backgroundColor: 'red',
                }
                ,
                trackSwitched: {
                    backgroundColor: '#ff9d9d',
                }
                ,
                labelStyle: {
                    color: 'red',
                }
                ,
                customWidth: {
                    width: 200,
                }
                ,
            }

    }


    handleChange(event, index, value) {
        console.log("handle change (value) ", value);
        console.log("handle change (event) ", event);
        console.log("handle change (index) ", index);
        //Set States

        this.state.setValue(value);
    }

    render() {
        return (
            <Paper style={{
                paddingTop: 16,
                paddingBottom: 16,
                marginTop: 3,
            }}>
                <form style={{padding: 30}} className="add-update-form" onSubmit={() => false}>
                    <Row>
                        <Col md={2}>
                            <DropDownMenu value={2} onChange={this.handleChange} openImmediately={true}>
                                        <MenuItem value={1} primaryText="Starter" />
                          <MenuItem value={2} primaryText="Mains" />
                          <MenuItem value={3} primaryText="Drinks" />
                            </DropDownMenu>
                        </Col>
                        <Col md={8}>
                            <TextField floatingLabelText="Units" hintText="Units" name="Units" ref="Units"
                                       key="Units" defaultValue="" fullWidth={false}/>
                            <TextField floatingLabelText="Price" hintText="Price" name="Price" ref="Price"
                                       key="Price" defaultValue="" fullWidth={false}/>
                        </Col>
                        <Col md={2}>
                            <Toggle
                                label="Side"
                                labelPosition="right"
                                style={this.styles.toggle}
                            />
                        </Col>
                    </Row>
                    <RaisedButton label="Save" primary={true} style={{marginRight: 15, marginTop: 15}}
                                  onClick=""/>
                </form>
            </Paper>


        );

    }

}

/*
Widget.propTypes = {
    documentList: React.PropTypes.array,
};
*/