Code Challenge — 1
Tags: javascript, react, reacthook
Published: 2023-11-11 03:06:38

---
title: Code Challenge — 1
published: true
date: 2023-10-30 16:44:28 UTC
tags: javascript,react,reacthook,reactjs
canonical_url: https://marcellecode.medium.com/code-challenge-1-8a9607911137
---

### Code Challenge — 1

Criando um componente de modal usando React.js

![](https://cdn-images-1.medium.com/max/1024/0*-6bVQ63_IDw5afua)
_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.

![](https://cdn-images-1.medium.com/max/647/1*WTav8WmNtsYfHSsbeN8qNQ.png)

#### 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:

<iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fcodesandbox.io%2Fembed%2Fcode-challenge-01-ktlj3h%3Ffontsize%3D14%26hidenavigation%3D1%26theme%3Ddark&amp;display_name=CodeSandbox&amp;url=https%3A%2F%2Fcodesandbox.io%2Fs%2Fktlj3h&amp;image=https%3A%2F%2Fcodesandbox.io%2Fapi%2Fv1%2Fsandboxes%2Fktlj3h%2Fscreenshot.png&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=codesandbox" width="1000" height="500" frameborder="0" scrolling="no"><a href="https://medium.com/media/efe34736edbd64881f77c4172e717ceb/href">https://medium.com/media/efe34736edbd64881f77c4172e717ceb/href</a></iframe>