title: Cannot render components to the page
body: <p>I've got a problem with the <code>render()</code> method - my components aren't rendering to the page. Can you help me to resolve this issue?</p>
  
  <p>Here is how the page should look like <a href="https://imgur.com/a/y3AfxMT" rel="nofollow noreferrer">https://imgur.com/a/y3AfxMT</a> </p>
  
  <p>Here's a link to my <a href="https://codepen.io/leocete/pen/xmrgox?editors=0011" rel="nofollow noreferrer">CodePen</a> </p>
  
  <p>The entire code:</p>
  
  <pre><code>// Lists of activities and restrictions
  const optionsList = ['Science Lab','Swimming','Cooking','Painting'];
  const checkList = [{id: 'a', text:'Dietary Restrictions'},
                     {id: 'b', text:'Physical Disabilities'},
                     {id: 'b', text:'Medical Needs'}]
  // First Name and LastName component
  function NameInput(props){
    return (
      &lt;div&gt;
        &lt;label&gt;{props.label}&lt;/label&gt;
        &lt;br/&gt;
        &lt;input type ='text' value={props.value} onChange={props.handleChange} /&gt;
      &lt;/div&gt;
    )
  }
  // List of activities component
  function SelectList(props){
    return (
      &lt;div&gt;
        &lt;label&gt;{props.label}&lt;/label&gt;
        &lt;br/&gt;
        &lt;select value={props.value} onChange={props.handleChange}&gt;
          {props.optionsList.map( (item, index) =&gt;
              &lt;option key={index} value = {item}&gt; {item} &lt;/option&gt;)}
        &lt;/select&gt;  
      &lt;/div&gt;
    )
  }
  // CheckBox list component
  function CheckBox(props){
     return (
       &lt;p&gt;
         &lt;label&gt;{props.value}) {props.label}&lt;/label&gt;
         &lt;input type="checkbox" name={props.name} id={props.id} value={props.value} checked={props.checked} onChange={props.handleChange} /&gt;
       &lt;/p&gt;
     )
  }
  // CheckbBoxList component
  function CheckBoxList(props){
    return (
      &lt;div&gt;
        &lt;label&gt;{props.title}&lt;/label&gt;
        &lt;ol&gt;
          {props.checkList.map((item,index) =&gt;
            &lt;CheckBox 
              key = {index}
              id = {props.id+'_'+index}
              name = {props.id}
              value = {item.id}
              checked = {(props.applyList.indexOf(item.id) &lt; 0 ? false : true)}
              label = {item.text}
              handleChange = {props.handleChange}
             /&gt;)
           }
        &lt;/ol&gt;
      &lt;/div&gt;
    )
  }
  // Remove button component
  function RemoveButton(props){
    return (
      &lt;button onClick= {() =&gt; props.handleClick()}&gt;x&lt;/button&gt;
    )
  }
  // Report element
  function ReportElem(props){
    return (
      &lt;tbody&gt;
      {props.reportElem.map((item, index) =&gt; 
        &lt;tr key={index}&gt;
          &lt;td&gt;&lt;RemoveButton /&gt;&lt;/td&gt;
          &lt;td&gt;{item.firstName}&lt;/td&gt; 
          &lt;td&gt;{item.lastName}&lt;/td&gt;
          &lt;td&gt;{item.activity}&lt;/td&gt;
          &lt;td&gt;{item.apply}&lt;/td&gt; 
        &lt;/tr&gt;
      )}
      &lt;/tbody&gt;
    )
  }
  // Report table
  function ReportTable(props){
    return (
      &lt;table&gt;
        &lt;thead&gt;
          &lt;tr&gt;
            &lt;th&gt;Remove&lt;/th&gt;
            &lt;th&gt;First Name&lt;/th&gt;
            &lt;th&gt;Last Name&lt;/th&gt;
            &lt;th&gt;Activity&lt;/th&gt;
            &lt;th&gt;Restrictions&lt;/th&gt;
          &lt;/tr&gt;
        &lt;/thead&gt;
        &lt;ReportElem reportList = {props.reportList} /&gt;
      &lt;/table&gt;
    )
  }
  
  class App extends React.Component{
    constructor(props){
      super(props)
      this.state = {
        firstName: '',
        lastName: '',
        activity: this.props.optionList[0],
        apply: [],
        items: []
      }
    }
    // Handle multiple inputs
    handleChange(event){
      this.setState({[event.target.name]: event.target.value})
    }
    // Handle CheckList changes
    handleChangeChk(event){
      let itemsCopy = this.state.apply
      if (event.target.chacked){
        itemsCopy.push(event.target.value)
      } else {
        console.log(itemsCopy.indexOf(event.target.value))
        itemsCopy.splice(itemsCopy.indexOf(event.target.value), 1)
      }
      this.setState({apply: itemsCopy})
    }
    // Add new item to the report and refresh the initial state
    addItem(){
      let itemsCopy = this.state.items
      itemsCopy.push({
        firstName: this.state.firstName,
        lastName: this.state.lastName,
        activity: this.state.activity,
        apply: this.state.apply.join(',')
      })
      this.setState({
        firstName: '', 
        lastName: '',
        activity: this.props.optionList[0],
        apply: [],
        items: itemsCopy
      })
    }
  
  
    render(){
      return (
        &lt;div&gt;
          &lt;NameInput label = 'First Name' value = {this.state.firstName} handleChange = {this.handleChange.bind(this)} /&gt;
          &lt;NameInput label = 'Last Name' value = {this.state.lastName} handleChange = {this.handleChange.bind(this)} /&gt;
          &lt;SelectList label = 'Select Activity' optionsList={this.props.optionsList} value = {this.state.activity} handleChange = {this.handleChange.bind(this)} /&gt;
          &lt;CheckBoxList title = {'Check all that apply'} applyList = {this.state.apply} handleChange = {this.handleChangeChk.bind(this)} /&gt;
          &lt;button className = 'submit' onClick = {() =&gt; this.addItem()}&gt;Submit&lt;/button&gt;
          {this.state.items.length &gt; 0 &amp;&amp; &lt;ReportTable reportList = {this.state.items} /&gt;}
        &lt;/div&gt;
      )
    }
  }
  
  ReactDOM.render(
     &lt;App optionsList={optionsList} checkList={checkList}/&gt;,
      document.getElementById('root')
  )
  </code></pre>