React: loading, component, sąlygos

//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
    }
  }


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

  componentWillMount(){
    this.getUsers()  
  }

  render() {
    return (
      <div>
        {!this.state.loading ? this.state.users.map(user => (
          <div>
          <h3>{user.name.first} {user.name.last}</h3>
          <p>{user.email}</p>
          <hr />
          </div>
        )) : <Loading/>}
      </div>
    );
  }
}

export default App;

//Loading.js

import React from 'react';

const Loading = () => <h2>Loading</h2>;

export default Loading

//variantas:

//Loading.js

import React from 'react';

const Loading = () => <h2>Loading</h2>;

export default Loading

//App.js

...

import {Loading} from './Loading'

....

//variantas su parametrais

//Loading.js

import React from 'react';

const Loading = props => <h2>{props.message}</h2>;

export default Loading

//App.js

...

)) : <Loading message="Loading!!"/>}

...

//su destruktoriumi

import React from 'react';

const Loading = ({message}) => <h2>{message}</h2>;

export default Loading