Q: Getting selected value from a mapped select input in react So I've set up my wireframes for an app that basically feeds down information when various components change.
I've currently got a JSON file that I'm testing data with
My React app:
/** @jsx React.DOM */

var BossBox = React.createClass({
    getBossList: function(){
        $.ajax({
          url: this.props.url,
          dataType: 'json',
          cache: false,
          success: function(data) {
            this.setState({bossData: data});
          }.bind(this),
          error: function(xhr, status, err) {
            console.error(this.props.url, status, err.toString());
          }.bind(this)
        });
    },
    getBossItems: function(i) {
        this.setState({bossItems: i.selectedIndex})         
    },
    getInitialState: function() {
        return {
            bossData: {
                bosses: [],                
            },
            bossItems: {
                items: [],
            },
            selectedItems: {
                items: [],  
            },
            loading: {"done": false}
        };
    },
    componentWillMount: function() {
        this.getBossList();  
    },
    render: function() {
        return (
            <div className="container">
                <FilterMenu bossData={this.state.bossData} getBossItems={this.getBossItems} />
                <Display itemsData={this.state.bossItems} />
                <Script />
            </div>

        )
    }
});

var FilterMenu = React.createClass({
    render: function() {
        var bosses = this.props.bossData.bosses.map(function(boss, i) {
            return (
                <option key={i} value={boss}>{boss.name}</option>
            )
        });
        return (
            <div className="navbar navbar-inverse" style={{marginTop: 20 + 'px'}}>
                <form className="navbar-form">
                    <div className="row">
                        <div className="col-md-12">
                            <select className="form-control" defaultValue="0" onChange={this.props.getBossItems} id="select_difficulty" style={{width: 100 + '%'}}>
                                <option value="0"> --- Select Difficulty --- </option>
                                {bosses}
                            </select>
                        </div>
                    </div>
                </form>
            </div>

        )
    }
});

var Display = React.createClass({
    render: function() {
        return(
            <div className="row">
                <ItemList itemsData={this.props.itemsData} />
                <RollerList />
            </div>
        )
    }
});

var ItemList = React.createClass({
    render: function() {
        console.log(this.props.itemsData);
        var item_list = this.props.itemsData.items.map(function(item, i){
            return (
                <li className="list-group-item" key={i} data-color="success"><a href="#" rel={"item="+item.id+"&bonus="+item.bonus}>{item.name}</a></li>
            ) 
        });
        return(
            <div className="col-md-3">
                <div className="well" style={{maxHeight: 300 +'px', overflow: 'auto'}}>
                    <ul id="check-list-box" className="list-group checked-list-box">
                      {item_list}
                    </ul>
                    <br />
                    <button className="btn btn-primary col-xs-12" id="get-checked-data">Roll</button>
                </div>
                <pre id="display-json"></pre>
            </div>  
        )
    }
});

var RollerList = React.createClass({
    render: function() {
        return(
            <div className="col-md-9 well">
              <ul className="list-group">
                  <li className="list-group-item">
                      <h3><a href="#" rel="item=113937&bonus=566">Item 1</a></h3>
                          <ul className="list-unstyled">
                              <div className="alert alert-success">
                                  <li><h4>Winner: <small>Shobi - 92</small></h4> <a href="#" className="btn btn-success btn-sm btn-sm">Assign To Shobi</a><a href="#" className="btn btn-danger btn-sm">Pass Loot</a>
                                  </li>
                              </div>
                              <div className="alert alert-info">
                                  <li>#2: Panakamanana - 84 <a href="#" className="btn btn-success btn-sm">Assign To Panakamanana</a><a href="#" className="btn btn-danger btn-sm">Pass Loot</a>
                                  </li>
                                  <li>#3: Karamesh - 7 
                                      <a href="#" className="btn btn-success btn-sm">Assign To Karamesh</a><a href="#" className="btn btn-danger btn-sm">Pass Loot</a>
                                 </li>
                              </div>
                          </ul>

                  </li>
                  <li className="list-group-item">
                      <h3><a href="#" rel="item=113937&bonus=566">Item 3</a></h3>
                    <ul className="list-unstyled">
                              <div className="alert alert-success">
                                  <li><h4>Winner: <small>Artekho - 81</small></h4>
                                      <a href="#" className="btn btn-success btn-sm">Assign To Artekho</a><a href="#" className="btn btn-danger btn-sm">Pass Loot</a>
                                  </li>
                              </div>
                              <div className="alert alert-info">
                                  <li>#2: Fedorf - 34 <a href="#" className="btn btn-success btn-sm">Assign To Fedorf</a><a href="#" className="btn btn-danger btn-sm">Pass Loot</a>
                                  </li>
                              </div>

                          </ul>

                  </li>
              </ul>
          </div>
        )
    }
});

var Script = React.createClass({
    render: function(){
        return (
            <script src={this.props.script_url}></script>
        )
    }
});

React.render(
    <BossBox script_url="/static/js/check.js" url="/roller.json" />,
    document.getElementById('content')
)

I've managed to get the map in the select box working fine, it returns what information I need. What I want to do, is when the select box changes, to update the state with the information within the selected value. 
Basically it just moves further down the json keys. So if for example the first index in bosses was selected, I need it to update the itemsData state to contain the contents of the bosses object that the index references.
Sorry if that doesn't make any sense. I can't get my head around how to explain it.

A: To get the value use, i'm not sure exactly which state you want to change:
i.options[i.selectedIndex].value

or 
i.target.value


A: If you want to get a value from a mapped input element you can refer to this example:
class App extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          fruit: "banana",
        };
    
        this.handleChange = this.handleChange.bind(this);
      }
    
      handleChange(e) {
        console.log("Fruit Selected!!");
        this.setState({ fruit: e.target.value });
      }
    
      render() {
        return (
          <div id="App">
            <div className="select-container">
              <select value={this.state.fruit} onChange={this.handleChange}>
                {options.map((option) => (
                  <option value={option.value}>{option.label}</option>
                ))}
              </select>
            </div>
          </div>
        );
      }
    }
    
    export default App;

