props - key

복수의 앨리먼트를 생성할 때는 key라는 특수한 props를 사용해야 한다.

내용이 수정될때마다 따로 component 파일로 저장한 js 파일을 열어 수정하는건
굴욕적이니까

toc에 주입하기

        <TOC data={this.state.contents}></TOC>
        <Content title="HTML" desc="HTML is HyperText Markup Language."></Content>

class TOC extends Component{
    render(){
        var lists = [];
        var data = this.props.data;
        var i = 0;
        while(i<data.length){
            lists.push(<li><a href={"/content/"+data[i].id}> {data[i].title}</a></li>);
            i = i+1;
        }
      return (
        <nav>
            <ul>
                <li><a href="1.html">HTML</a></li>
                <li><a href="2.html">CSS</a></li>
                <li><a href="3.html">JavaScript</a></li>
            </ul>
        </nav>
      );
    }
  }
export default TOC;