Code Challenge — 1

MarcelleCode
4 min readOct 30, 2023

Criando um componente de modal usando React.js

Photo by Goran Ivos on Unsplash

Procurando praticar mais programação eu estarei publicando uma série de artigos explicando qual foi a solução desenvolvida e disponibilizando o código em cada desafio. E o desafio dessa semana é criar um componente de modal usando React.js com as seguintes condições:

  • O conteúdo da modal precisa ser passado por props
  • O usuário precisa conseguir fechar a modal através de um botão
  • O texto do botão também precisa ser passado por props
  • O usuário precisa conseguir fechar a modal ao clicar fora da caixa

Criando a estrutura do componente

A primeira coisa que eu vou fazer então vai ser criar um arquivo para o componente de modal.

// src/modal.js
const Modal = () =>
return (
<div>
Modal
</div>
);
};

export default Modal;

Depois de criar o componente eu vou adicionar no App.js esse componente.

import "./styles.css";
import Modal from "./modal";

export default function App() {
return (
<div className="App">
<Modal/>
</div>
);
}

Para atender aos requisitos do desafio, eu preciso criar um componente que receba as seguintes propriedades(props):

  • Um texto que será exibido como conteúdo da modal
  • Um texto para o botão
const Modal = (props) => {
if (!props.isOpen) return null;

const handleClickOutside = (e) => {
if (e.target === e.currentTarget) {
props.closeModal();
}
};
return (
<div className="modal-container" onClick={handleClickOutside}>
<div className="modal-content">
{props.content}
<button onClick={props.closeModal}>{props.buttonLabel}</button>
</div>
</div>
);
};

export default Modal;

Como as props são um objeto, eu posso fazer a desestruturação e selecionar as propriedades que eu vou precisar usar(além de tornar o código mais legível).

const Modal = ({ content, buttonLabel}) => {
if (!isOpen) return null;

const handleClickOutside = (e) => {
if (e.target === e.currentTarget) {
closeModal();
}
};
return (
<div className="modal-container" onClick={handleClickOutside}>
<div className="modal-content">
{content}
<button onClick={closeModal}>{buttonLabel}</button>
</div>
</div>
);
};

export default Modal;

E no App.js eu vou adicionar essas propriedades ao <Modal />

<Modal
content={"Hey! Eu sou uma modal."}
buttonLabel={"fechar"}
/>

Entendendo o CSS

Estrutura do HTML

Para essa modal eu criei uma estrutura com 2 divs, onde a div principal (modal-container) irá ser responsável por posicionar o elemento na tela e a div interna (modal-content) vai ser responsável por posicionar os elementos da modal.

CSS da div principal

Como a ideia dessa div é auxiliar no posicionamento da modal na tela, ela precisa ter o tamanho total da tela e não pode ser afetado pelo restante dos elementos do site. Para isso vamos usar a propriedade “position” e outras propriedades, mas ela é a mais importante.

Um elemento com “position:fixed” passa a ser posicionado de acordo com a janela de visualização, não seguindo mais o posicionamento herdado pelos elementos mais altos da hierarquia.

.modal-container {
display: flex;
width: 100%;
height: 100%;
flex-direction: row;
justify-content: center;
align-items: center;
background-color: rgba(0, 0, 0, 0.7);
position: fixed;
top: 0;
left: 0;
}

CSS da caixa de modal

Esse elemento tem um CSS simples então eu vou apenas liberar o código abaixo

.modal-content {
display: flex;
flex-direction: column;
background-color: white;
border: 1px solid black;
padding: 30px;
border-radius: 5%;
}

.modal-content button {
border: none;
margin-top: 5px;
padding: 5px 0px;
}

Usando hooks para controlar a exibição da modal

Hooks são funções javascript que são encapsuladas pela biblioteca do React.js. Permitindo que você economize tempo no processo de desenvolvimento. E para o componente de modal, eu vou usar o hook de useState() para me ajudar a controlar quando a modal deve, ou não, ser exibida. Como eu não quero que a página abra com a modal aberta, eu já adicionei o valor padrão como false.

import "./styles.css";
import Modal from "./modal";
import { useState } from "react";

export default function App() {
const [statusModal, setModalStatus] = useState(false);

return (
<div className="App">
<Modal
content={"Hey! Eu sou uma modal."}
buttonLabel={"fechar"}
/>
</div>
);
}

Depois disso eu vou editar o componente de modal e adicionar duas propriedades: uma para gerenciar o status da modal e uma para que a modal possa ser fechada quando ela já estiver aberta. Dessa forma o componente da modal ficaria dessa forma:

// app.js
<Modal
content={"Hey! Eu sou uma modal."}
buttonLabel={"fechar"}
isOpen={statusModal}
closeModal={() => setModalStatus(false)}
/>
// modal.js
const Modal = ({ content, buttonLabel, isOpen, closeModal }) => {
if (!isOpen) return null;

return (
<div className="modal-container" onClick={handleClickOutside}>
<div className="modal-content">
{content}
<button onClick={closeModal}>{buttonLabel}</button>
</div>
</div>
);
};

export default Modal;

A propriedade “isOpen” irá receber o valor do state declaro no App.js, como ele é um booleano caso o valor dele esteja como false ao invés de retornar o componente eu retorno null e a modal não é exibida na tela. Já a propriedade “closeModal” ela recebe a função closeModal() declarada no App.js, e quando essa função é executada ela altera o estado da Modal para false.

Espero que tenham gostado e que esse artigo possa te ajudar de alguma forma :)

O link para o código completo do componente:

--

--

MarcelleCode

Full Stack Developer (JavaScript | Python | Go). Graduanda em Ciências Matemáticas e da Terra (UFRJ) e se arriscando na área de Ciência de Dados e IA (só pelo r