Designer023

export default ListItem;

Designer023

export default List;

Designer023

import React, { Component } from 'react';

import ListItem from './ListItem';
...

Designer023

import React, { Component } from 'react';

import List from './components/List';
...

Designer023

import React, { Component } from 'react';

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

Designer023

import React, { Component } from 'react';

class List extends Component {
  render() {

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

Designer023

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

Designer023

class App extends Component {
  render() {
    return (
      <div>
        <h1>List of lists</h1>
        <h2>Top animals</h2>
        <List data={top_animals} />
        <h2>Other animals</h2>
        <List data={other_animals} />
      </div>

Designer023

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

let other_animals = [
  "koala",

Designer023

class App extends Component {
  render() {
    return (
      <div>
        <h1>List of lists</h1>
        <h2>Top animals</h2>
        <List />
        <h2>Other animals</h2>
        <List />
      </div>