Designer023

...
// Create variable with mapped data
    let list_items = list_data.map(function(item, index) {
      return (
        <ListItem text={item} key={index} />
      )
    })
...

Designer023

class ListItem extends Component {
  render() {
    return (
      <li>{this.props.text}</li>
    )
  }
}

Designer023

class List extends Component {
  render() {

    // Create variable with mapped data
    let list_items = list_data.map(function(item, index) {
      return (
        <ListItem text={item} />
      )
    })

Designer023

class List extends Component {
  render() {

    // Create variable with mapped data
    let list_items = list_data.map(function(item, index) {
      return (
        <ListItem />
      )
    })

Designer023

import React, { Component } from 'react';

let list_data = [
  "Cat",
  "Dog",
  "Fish",
  "Parrot",
  "Rabbit"
]

Designer023

class ListItem extends Component {
  render() {
    return (
      <li>Item</li>
    )
  }
}

class List extends Component {
  render() {

Designer023

class List extends Component {
  render() {
    return (
      <div>
        <h2>List title</h2>
        <ul>
        
        </ul>
      </div>
    )

Designer023

class List extends Component {
  render() {
    return (
      <h2>List title</h2>
      <ul>
      
      </ul>
    )
  }
}

Designer023

class List extends Component {
  render() {
    return (
      <h2>List title</h2>
    )
  }
}

Designer023

import React, { Component } from 'react';

class List extends Component {
}

class App extends Component {
  render() {
    return (
      <div>
        <h1>Hello React!</h1>