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