React: event, destructor, inline style, key, join

Kodo pavyzdys [naudojant axios] gautų duomenų talpinimas į State. Pridėtas evant'as, reguojantis į paspaudimą. Naudojimo inline style pavyzdys. Masyvų sujungimas, siekiant neprarasti jau turimų state duomenų. Bindinimas. Pasikartojantiems elementams key suteikimas - nes visi React elementai turi turėti savo unikalius numerius, todėl pasikartojančius reikia papildomai juos 'išskirti'.   

//App.js
import React, { Component } from 'react';
import axios from 'axios'
import Loading from './Loading'



class App extends Component {
  constructor(props){
    super(props)
    //state
    this.state ={
      users: [],
      loading: false
    }
    //bind - tinkamo sąryšio su kviečiant onclicku
    this.handleSubmit = this.handleSubmit.bind(this)
  }

  getUsers(){
    this.setState({loading:true})
    axios('https://api.randomuser.me/?nat=US&results=5').then(response => this.setState({
      //turimo state sujungimas su gautais duomenimis
      users: [...this.state.users, ...response.data.results],
      loading: false
    }))
  }

  //metodas paspaudimo reakcijai
  handleSubmit(e){
    e.preventDefault();
    this.getUsers();
    console.log('more users loaded');
  }

  componentWillMount(){
    this.getUsers()  
  }

  render() {
    //destruktorius iš stato
    const {loading, users} = this.state;
    return (
      <div>
      <form onSubmit={this.handleSubmit}>
            <input type="submit" value="load more..."/>
          </form>
        {!loading ? users.map(user => (
          <div key={user.id.value}>
          <h3 style={{color:'red'}}>{user.name.first} {user.name.last}</h3>
          <p>{user.email}</p>
          <hr />
          
          </div>
        )) : <Loading message="Loading!!"/>}
      </div>
    );
  }
}

export default App;