0

Estou criando uma página de personagens, nela tem uma foto de cada personagem e quando clico na foto ela abre um modal exibindo mais informações do personagem. Porém em vez de abrir um só modal, ele abre todos de uma vez.

import React, { useEffect, useState } from "react";
import axios from "axios";
import Modal from "react-modal";
import styles from '../../styles/Characters/Characters.module.css'

Modal.setAppElement("#__next");

export default function MainCharacters (characters) {

    const [open, isOpen] = useState(false);
    const [itemSelecionado, setItemSelecionado] = useState(null);
    const [items, setItems] = useState([]);
    
    const onItemClicked = (item) => {
        setItemSelecionado(item);
        isOpen(true);
    }

    const baseURL = "https://hp-api.herokuapp.com/api/characters"
    const [resposta, setResposta] = useState()

    useEffect(() => {
        axios.get(baseURL) .then((response) => {
        setResposta(response.data);
        })
    }, [])

    return (
        <main>
            <ul className={styles.ulCards}>
                <div className={styles.container}>
                    {resposta &&
                    resposta.map((characters ,index)=>{
                        return(
                            <li className={styles.ulCards_li}>
                                <div key={index}>
                                    <div className={styles.divImageCard} onClick={onItemClicked}><img alt={characters.name} src={characters.image} width='180px' height='244px'></img></div>
                                    <div className={styles.divCharactersName} onClick={onItemClicked}><h3 className={styles.charactersName}>{characters.name}</h3></div>
                                    <Modal isOpen={open}>
                                        <p>{characters.name}</p>
                                    </Modal>
                                    {items.map((item, index) => (
                                        <li key={'item-${index}'} onClick={() => onItemClicked(item)}>
                                            {item.name}
                                        </li>
                                    ))}
                                </div>
                            </li>
                        )           
                    })}
                </div>
            </ul>
        </main>
    )
}
10
  • Bem vindo ao SOpt. Entendo a sua urgência, mas a ideia do SO é lhe ajudar e criar um banco de conhecimento para pessoas com as mesmas dificuldades que a sua. Em resumo, colocar com URGENTE no título não irá fazer com que a comunidade te ajude mais rápido.
    – Guto
    Commented 19/10/2022 às 12:24
  • blz, vou editar... mas vc pode me ajudar?
    – mateusSR
    Commented 19/10/2022 às 12:34
  • Não manjo de react mas acho que o seu erro está neste map da resposta onde ele ta fazendo um loop em todos os personagens. O modal deveria estar fora deste loop senao vc ta criando n modais e o open é definido para todos. Se vc tirar ele e colocar em vez de characters.name o itemselecionado.nameacvho que resolve. Quando eu digo tirar é colocar a tag modal fora do ul
    – Guto
    Commented 19/10/2022 às 12:57
  • Deu certo em partes, ele criou só um modal, porém agora ele não tá chamando o name da api @Guto
    – mateusSR
    Commented 19/10/2022 às 13:14
  • então, eu acho q nesse onitemclicked você deveria passar de alguma forma o characters[index] pra ele entender que o item selecionado é esse personagem. Testando aqui ele passa o elemento do dom.
    – Guto
    Commented 19/10/2022 às 13:20

2 Respostas 2

0

Existem dois erros no seu código.

O primeiro é que você ta gerando um modal para cada personagem e quando você define o ìsOpen como verdadeiro ele acaba abrindo todos os modais ao mesmo tempo.

Solução

Remover o modal do loop realizado pelo map e definir uma variável para armazenar as informações do item selecionado.

O Segundo problema é a forma que está sendo chamada a função onItemClicked que deveria receber como parâmetro o personagem que foi clicado. No seu exemplo ele está recebendo um elemento do DOM.

Segue código abaixo e no live edtior aqui.

import React, { useEffect, useState } from 'react';
import axios from 'axios';
import Modal from 'react-modal';

export function App(props) {
  const [open, isOpen] = useState(false);
  const [itemSelecionado, setItemSelecionado] = useState(null);
  const [items, setItems] = useState([]);
  const baseURL = 'https://hp-api.herokuapp.com/api/characters';
  const [resposta, setResposta] = useState();

  const onItemClicked = item => {
    console.log(item);
    setItemSelecionado(item);
    isOpen(true);
  };

  useEffect(() => {
    axios.get(baseURL).then(response => {
      setResposta(response.data);
    });
  }, []);

  return (
    <main>
      <ul>
        <div>
          {resposta &&
            resposta.map((characters, index) => {
              return (
                <li>
                  <div key={index}>
                    <div onClick={() => onItemClicked(characters)}>
                      <img
                        alt={characters.name}
                        src={characters.image}
                        width='180px'
                        height='244px'
                      ></img>
                    </div>
                    <div onClick={() => onItemClicked(characters)}>
                      <h3>{characters.name}</h3>
                    </div>
                  </div>
                </li>
              );
            })}
        </div>
      </ul>
      <Modal isOpen={open}>
        <p>{itemSelecionado == null ? 'vla' : itemSelecionado.name}</p>
      </Modal>
    </main>
  );
}
1
  • poxa, vlw mano!!
    – mateusSR
    Commented 19/10/2022 às 14:24
0

Vou deixar a solução aqui em baixo caso alguém passe pela mesma situação q eu.

`import React, { useEffect, useState } from "react"; import axios from "axios"; import Modal from "react-modal"; import styles from '../../styles/Characters/Characters.module.css'

Modal.setAppElement("#__next");

export default function MainCharacters (characters) {'

const [open, setIsOpen] = useState(false);
const [itemSelecionado, setItemSelecionado] = useState(null);
const [items, setItems] = useState([]);

const onItemClicked = (item) => {
    setItemSelecionado(item);
    setIsOpen(true);
}

console.log(items);

const baseURL = "https://hp-api.herokuapp.com/api/characters"
const [resposta, setResposta] = useState()

useEffect(() => {
    axios.get(baseURL) .then((response) => {
    setResposta(response.data);
    })
}, [])

return (
    <main>
        <ul className={styles.ulCards}>
            <div className={styles.container}>
            {resposta &&
                resposta.map((characters, index) => {
                    return (
                        <li key={index} className={styles.ulCards_li}>
                            <div key={index}>
                                <div className={styles.divImageCard} onClick={() => onItemClicked(characters)}>
                                    <img
                                    alt={characters.name}
                                    src={characters.image}
                                    width="180px"
                                    height="244px"
                                    />
                                </div>
                                <div
                                    className={styles.divCharactersName}
                                    onClick={() => onItemClicked(characters)}
                                >
                                    <h3 className={styles.charactersName}>{characters.name}</h3>
                                </div>
                                {items.map((item, index) => (
                                    <li key="item-${index}" onClick={() => onItemClicked(item)}>
                                    {item.name}
                                    </li>
                                ))}
                            </div>
                        </li>
                    );
                })}
            </div>
        </ul>
        <Modal isOpen={open}>
            <p>{itemSelecionado == null? 'vla' : itemSelecionado.name}</p>
            <button onClick={() => setIsOpen(false)}>Fechar</button>
        </Modal>
    </main>
)

}`

1
  • Como está escrito atualmente, sua resposta não é clara. Por favor, pode editar para adicionar mais detalhes, que ajudarão outras pessoas a entender como isso resolve a pergunta feita. Você pode encontrar mais informações sobre como escrever boas respostas na Central de Ajuda.
    – Comunidade Bot
    Commented 19/10/2022 às 14:26

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .