[React] map 사용방법

- map() 메소드는 파라미터로 전달 된 함수를 통하여 배열 내의 각 요소를 순차적으로 돌며 그 결과로 새로운 배열을 생성한다.

 

AreaList.js

import React, { Component } from 'react';
import AreaListForm from './AreaListForm';
import AddedArea from './AddedArea';


class AreaList extends Component {
  state={
    areaInfo:[],
  }
  handleCreate=(data)=>{
    const{areaInfo}=this.state;
    this.setState({
      areaInfo:areaInfo.concat(data)
    })
    
  }
  render() {
    return (
      <div>
        <AreaListForm onCreate={this.handleCreate} />
        {/* {JSON.stringify(this.state.areaInfo)} */}
        {/* <AreaListInfo data={this.state.areaInfo}/> */}
        <AddedArea data={this.state.areaInfo}/>
      </div>
    );
  }
}

export default AreaList;

 

AreaListForm.js

import React, { Component } from 'react';

// 로그인 한 건물 관리자가 관리중인 건물 목록 표시 화면
// /area/list
class AreaListForm extends Component {
  id = 0;

  state={
    name: '',
  }
  handleChange=(e)=>{
    this.setState({
      [e.target.name]:e.target.value 
    })
  }

  handleSubmit=(e)=>{
    e.preventDefault();
    this.props.onCreate(this.state);
    this.setState({
      name:'',
    })
  }
  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <input 
          name="name"
          className="areaList"
          placeholder="건물 추가" 
          value={this.state.name}
          onChange={this.handleChange} 
        />
        <input type="submit" value="등록"/>
        
      </form>
    );
  }
}

export default AreaListForm;

 

AddedArea.js

import React,{Component} from 'react';

class AddedArea extends Component {
    static defaultProps = {
        data:[]
    }
    render(){
        const {data} = this.props;
        const list = data.map((contact,id)=>{
            return (<li>{contact.name} {id}</li>)
        })
        return(
            <div>
                {list}
            </div>
        )
    }
};

export default AddedArea;

 

{id}는 키값으로 사용.

그냥 {contact}가 아니라 {contact.name}으로 해주어야함!!! (여기서 헤맴)