Examples class 1

[zamarrowski]

App.js:

import React from 'react';
import logo from './logo.svg';
import './App.css';
import Test from './Test';

class App extends React.Component {

  state = {
    status: false
  }

  toggleTestComponent = () => {
    this.setState({ status: !this.state.status })
  }

  render() {
    return (
      <div className="App">
        <header className="App-header">
          {this.state.status ? <Test /> : ''}
          <button onClick={this.toggleTestComponent}>Mostrar/ocultar</button>
        </header>
      </div>
    );
  }
}

export default App;

Test.js:

import React, { Component } from 'react'

class Test extends Component {

    state = {
        users: ['sergio', 'zamarro']
    }

    componentDidMount() {
        let users = [...this.state.users]
        users.push('otro')
        this.setState({ users })
    }

    render() {
        return JSON.stringify(this.state.users)
    }

    componentWillUnmount() {
        console.log('Me destruyo!')
    }

}

export default Test