---
titles: Progress on Web Assignment
---
## Github
https://github.com/Cancer-of-Japan/Show-Pin-on-Map
## 現状
1. スタイリングは完了（ある程度）
2. 静的ではあるが、住所から地図表示、緯度経度は取得、表示可能
3. 都道府県選択、3つに別れた住所入力欄に入力、データの保存は可能
4. 住所変更時（"Change!"ボタンクリック時）にアラート表示、今後ポップアップに変更
5. "Cancel" クリック時に保存された入力データをリセット可能

## 課題
1. "Show on Map!"クリック時に子であるMap.jsxを呼んで、リスポンスがあるが、Mapが変更されない
2. "Cancel"時にデータはリセットされるが、表示が残ったままになってしまっている
3. ポップアップがうまく行かない。

## 構造
App.js -> Select.jsx -> Map.jsx
元々は
App.js
|
Select.jsx, Map.jsx
という風にSelectとMapは共にApp下で対等だったが、今回はSelectとMap以外では住所の受け渡しなどデータのやり取りやJsonファイルを使わないのでSelectで住所を受け取り、それをMapに渡すという構造にしました。

## 説明
Select.jsx

constructor(props){
    super(props);
    this.state = {
      prefecture: 'Tokyo',
      city: 'Shibuya', 
      addrs: 'ekimae',
      building: '',
      showMap: false,
    };
    this.onChange = this.onChange.bind(this);
    this.onSubmit = this.onSubmit.bind(this);
    this.handleClick = this.handleClick.bind(this);
    this.onTextAreaChange = this.onTextAreaChange.bind(this);
    this.onAddrsChange = this.onAddrsChange.bind(this);
    this.onBuildingChange = this.onBuildingChange.bind(this);
    this.resetText = this.resetText.bind(this);
  }
  
 // This is for pull down 
  onChange(e){
    console.log(e.target.value);
    this.setState({ prefecture: e.target.value});
    
  }
//When "Show on Map!" is clicked.
  handleClick = (event) =>{
    this.state.showMap = true;
    console.log("clicked");
/*showMap var is boolean, which is used to toggle showing map
 *  after "Show on Map!" is clicked.
 *  Works in data level, but not in visual level*/
    this.setState({showMap:  event.target.value});
  }

/*Resets text when "Cancel" is clicked. 
 * Works in data level, but not in visual level*/
 resetText = (event)=>{
    console.log("reset !")
    this.state.prefecture = ' ';
    this.state.city = ' ';
    this.state.addrs = ' ';
    this.state.building = ' ';
    this.setState({prefecture: event.target.value});
    this.setState({ city: event.target.value });
    this.setState({ addrs: event.target.value });
    this.setState({ building: event.target.value });
    //this.setState();
  }
//Submit function for "form" part
  onSubmit(e){ 
    e.preventDefault();
    console.log("onSubmit");
    console.log(this.state);
    return(
    <Map location = {this.state.city + this.state.addrs + this.state.building}/> 
    );
  }

//Alert section when "Change Address" is clicked
  onChangeAddress = (event) => {
    alert("Change to  " + this.state.prefecture  + " " + this.state.city + " " + this.state.addrs + " " + this.state.building );
    <Popup trigger={<button> Trigger</button>} position="right center">
    <div>Popup content here !!</div>
  </Popup>
  }
//Text box for "city"
  onTextAreaChange = (event) =>{
    this.setState({ city: event.target.value });
  }
//Text box for "Address"
  onAddrsChange = (event)=>{
    this.setState({ addrs: event.target.value });
  }
//Text box for "building"
  onBuildingChange = (event) =>{
    this.setState({ building: event.target.value });
  }