Pasar data de cada resultado a un Modal
Publicado por Sergio (2 intervenciones) el 20/09/2020 21:04:37
Como va? Tengo estos dos archivos, uno que filtra y muestra los resultados de una Api (Characters), y el otro es una ventana Modal que debería mostrar los datos de los personajes cuando doy click en el botón de su Card.
Alguien me podría guiar sobre como asociarlos entre si? Gracias, saludos!
------------------------------------------------------
Alguien me podría guiar sobre como asociarlos entre si? Gracias, saludos!
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
import React, { useState } from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';import 'materialize-css';import { connect } from 'react-redux';
import { getCharactersAction} from '../redux/charsDuck';
import CharsModal from './CharsModal';function Characters ({chars, search}) {
const [modal, setModal] = useState(false)
function isOpen() {
setModal(true)
}function isClose(){
setModal(false)
}//let charFilter = chars.filter((char) =>
char.name.toLowerCase().includes(search.toLowerCase())||
char.type.toLowerCase().includes(search.toLowerCase())
)let charResults = charFilter.map((char) =>
<div key={char.id} id="card" class="card col-md-2">
<div class="card-image">
<img src={char.image} alt={char.name}/>
</div>
<div class="card-name">
<p>{char.name}</p>
</div>
<div className="button">
<button id="isOpen"
onClick={() => isOpen}
href="#">
Show More</button>
</div>
</div>
); return (<>
{charResults }
<CharsModal charFilter={charFilter}
modal={modal}
isClose={isClose}
isOpen={isOpen}
/></>
);}function mapChars(state) {
return {chars: state.dataChar.characters
} }export default connect( mapChars,{getCharactersAction}) (Characters)
------------------------------------------------------
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
import React from 'react';import Modal from 'react-modal';Modal.setAppElement('#root')
const CharsModal = ({charFilter, modal, isOpen, isClose}) => {
return ( <ModalisOpen={modal}
onRequestClose={isClose}
contentLabel="Example Modal"
>{charFilter.map((char ) =>
<div key={char.name} id="modale" className="modale">
<div class="modal-content">
<h4>{char.name}</h4>
<p>{char.gender}</p>
<img src={char.image} alt={char.name}/>
</div>
<div class="modal-footer">
ssgasg
</div>
<button onClick={isClose}>Close</button>
</div>)}
</Modal>
);}export default CharsModal;
Valora esta pregunta
0