JSFiddle - React, Tailwind, and code Playground

by Steven Senkus

JavaScript

import React from "react";
import AppComponent from "./AppComponent.js";
export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      hint: "",
      person: {
        john: "23",
        tim: "33",
        tony: "28"
      },
      alternatePerson: {
        scott: "42"
      },
      profile: [
        {
          name: "john",
          age: "23"
        },
        {
          name: "tim",
          age: "33"
        },
        {
          name: "tony",
          age: "28"
        }
      ]
    };
  }

  render() {
    const profiles = this.state.profile;
    const ProfileElements = profiles.map(profile => {
      return <AppComponent profile={profile} />;
    });
    return <ul>{ProfileElements}</ul>;
  }
}

//Using AppComponent.js
//Display list of progiles useing flex box alinged horizontally
//Note name and age -- sum ages of all peopele using reduce api
//Add button that changes alignment
//Combine person and alternatePerson into one variable then iterate over each person and dipslay name and age