kodeday-14MAR2020/codigoApp.js at master · richardo777/kodeday-14MAR2020 · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
import React from 'react';
// import logo from './logo.svg';
import './App.css';

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      modalActivo: false
    }
  }

  activarModal() {
    this.setState({
      modalActivo: true
    })
  }

  desactivarModal() {
    this.setState({
      modalActivo: false
    })
  }

  renderCards(e) {
    return (
      <div key={e} className='Card' onClick={e => this.activarModal()}>
        <div className='Card-imagen'>
          <figure>
            <img alt='test' src={'https://rickandmortyapi.com/api/character/avatar/167.jpeg'} />
          </figure>
        </div>
        <div className='Card-descripcion'>
          <div className='Card-name'>
            <h3>Rick fdshfkjgdajkf jg fdkasgf dlask</h3>
          </div>
        </div>
      </div>
    )
  }

  render() {
    const { modalActivo } = this.state
    const fakeData = [0,1,2,3,4,5,6,7]
    const cards = fakeData.map(e => this.renderCards(e))
    console.log(cards)
    return (
      <div className="App">
        <div className='App-contenedor'>
          <h1>Rick and Morty</h1>
          <div className='Cards-contenedor'>
            {cards}
          </div>
          { modalActivo ? (
            <div className='Modal' onClick={e => this.desactivarModal()}>
              <div className='Card-detalle'>
                <div className='Card-imagen'>
                  <figure>
                    <img alt='test' src={'https://rickandmortyapi.com/api/character/avatar/167.jpeg'} />
                  </figure>
                </div>
                <div className='Card-detalle-descripcion'>
                  <div className='descripcion'>
                    <h3>Name</h3>
                    <div className='caracteristica'>
                      <p>Status</p>
                      <p className='caracteristica-valor'>
                        Muerto
                      </p>
                    </div>
                    <div className='caracteristica'>
                      <p>Especie</p>
                      <p className='caracteristica-valor'>
                        Humano
                      </p>
                    </div>
                    <div className='caracteristica'>
                      <p>Genero</p>
                      <p className='caracteristica-valor'>
                        ??
                      </p>
                    </div>
                    <div className='caracteristica'>
                      <p>Origen</p>
                      <p className='caracteristica-valor'>
                        Tierra
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          ) : null }
        </div>
      </div>


    );
  }
}

export default App;