Dynamic List (Coding Challenge Day 2)

by bonbonlemon

HTML

<div id="app"></div>

CSS

html,
body {
  min-height: 100%;
}

#items-box {
  text-align: center;
}

.item-box {
  display: inline-block;
  height: 100px;
  width: 110px;
  margin-right: 15px;
  margin-top: 20px;
  outline: thin solid black;
}

/* #items-box {
  margin: 0 auto;
  padding-left: 15px;
  width: 500px;
}

.item-box {
  display: inline-block;
  height: 100px;
  width: 110px;
  margin-right: 15px;
  margin-top: 20px;
  outline: thin solid black;
} */

React

class TodoApp extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
    	items: [1, 2, 3, 4, 5, 6, 7, 8, 9]
    }
    
    this.handleClick = this.handleClick.bind(this);
  }
  
  handleClick() {
  	const items = this.state.items;
    items.push(items[items.length - 1] + 1);
  	this.setState({
    	items: items
    });
  }
  
  render() {
  	const { items } = this.state;
    return (
      <div>
        <button onClick={this.handleClick}>Increase!</button>
        <div id="items-box">
          { items.map((item, idx) => (
            <div className="item-box" key={idx}>{item}</div>
          ))}
        </div>
        
      </div>
    )
  }
}

ReactDOM.render(<TodoApp />, document.querySelector("#app"))