/** * File: App.js * "React State Example-1: Update state using 2 select elements." * by Joe Dorocak (JoeCodeswell.com) * Demonstrates changing state with 2 select elements * * Source Code Link: https://joecodeswell.wordpress.com/2018/09/25/react-state-example-1-update-state-using-2-select-elements/ * * MIT License * * Copyright (c) [2018] [Joseph P. Dorocak] * * Permission is hereby granted, free of charge, to any person obtaining a copy * of this software and associated documentation files (the "Software"), to deal * in the Software without restriction, including without limitation the rights * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell * copies of the Software, and to permit persons to whom the Software is * furnished to do so, subject to the following conditions: * * The above copyright notice and this permission notice shall be included in all * copies or substantial portions of the Software. * * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE * SOFTWARE. * * https://en.forums.wordpress.com/topic/posting-javascript-markdown-does-not-show/ * * */ import React, { Component } from 'react'; import logo from './logo.svg'; import './App.css'; let programmerList = ["Admiral Grace Hopper","Ada Lovelace","Donald Knuth","James Gosling","Guido van Rossum","Linus Torvalds"]; class App extends Component { constructor() { super(); this.state = { counter: 0, programmer_list: programmerList, fmSelFrom: programmerList[0], fmSelTo:programmerList[0] }; } handleFromChange = (event) => { this.setState({ fmSelFrom: event.target.value }); } handleToChange = (event) => { this.setState({ fmSelTo: event.target.value }); } render() { // inside class App -> render(){ before return( return ( /* begin out of the box jsx */ <div> <header> <img src="{logo}" alt="logo" /> <h1>Welcome to React</h1> </header> <p> To get started, edit <code>src/App.js</code> and save to reload. </p> {/* end out of the box jsx */} {/* begin non out of the box jsx */} <div id="show-programmer-list"> <p>Programmer List</p> {this.state.programmer_list.map( (itm,ix) => <p>ix:{ix}->itm:{itm}</p> ) } </div> <div id="select-programmer-from-to"> Pick your FROM Programmer: {this.state.programmer_list.map( (itm,ix) => {itm} ) } Pick your TO Programmer: {this.state.programmer_list.map( (itm,ix) => {itm} ) } <p>this.state.fmSelFrom: {this.state.fmSelFrom}</p> <p>this.state.fmSelTo: {this.state.fmSelTo}</p> </div> {/* end non out of the box jsx */} </div> /* end of <div> */ // inside class App -> render(){ ->return( -> after <div></div> ); // end render -> return } // end render () code } export default App;