DropDown

by Allie Yu

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Babel + JSX

const items = [1, 2, 3, 4];
class Select extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      tech: 'select',
      items: items
    };
  }
  
  handleChange = e => {
    this.setState({
      tech: e.target.value
    })
  }
  
  render(){
    return (
      <div>
        <select onChange={this.handleChange} value={this.state.tech}>
        {
        	this.state.items.map(item => (
          	<option >{item}</option>
          ))
        }
        </select>
        <h2>{this.state.tech}</h2>
      </div>
    )
  }
}

class App extends React.Component {
  constructor(props){
    super(props);
  }
  render(){
    return (
      <form>
        <fieldset className="fields">
            <Select />        
        </fieldset>
      </form>
    )
  }
}

let target = document.getElementById('root');
ReactDOM.render(<App />, target);








/* 

class App extends React.Component {
  constructor(props){
    super(props);
  }
  render(){
    return (
      <div>
        <Form />    
      </div>
    )
  }
}

class Form extends React.Component {
  constructor(props){
    super();
  }
  render(){
    return (
      <form>
        <fieldset className="fields">
          <div>
            <Select />        
          </div>
        </fieldset>
       </form>
    )
  }
}

class Select extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      tech: 'select',
    };
  }
  
  handleChange = e => {
    this.setState({
      tech: e.target.value
    })
  }
  
  render(){
    return (
      <div>
        <select onChange={this.handleChange} value={this.state.tech}>
          <option value="select">Select a technology</option>
          <option value="Angular">Angular</option>
          <option value="Bootstrap">Bootstrap</option>
          <option value="React">React</option>
        </select>
        <h2>{this.state.tech}</h2>
      </div>
    )
  }
}

let target =...