Doubts with constant in React

Asked

Viewed 107 times

0

Hello,

This is my first project with React Js and I have a question, I imagine, basic.

I have code below that is working perfectly:

import React, { Component } from 'react';
import { FontAwesomeIcon  } from '@fortawesome/react-fontawesome';

import './Header.scss';

import logo from '../../assets/images/logo.png';

import { faUserCircle } from '@fortawesome/free-regular-svg-icons';

export default class Header extends Component { 
  render() {

    function handleBurgerBtn() {
      const mobile = document.getElementById("mobile");
      const navigationWindow = document.getElementById("navigationWindow");
      const loginWindow = document.getElementById("loginWindow");

      document.body.scrollTop = 0;
      document.documentElement.scrollTop = 0;

      navigationWindow.style.display = 'block';
      loginWindow.style.display = 'none';
      mobile.classList.toggle("eventNavigationWindow");
    }
    function handleLoginBtn() {
      const mobile = document.getElementById("mobile");
      const navigationWindow = document.getElementById("navigationWindow");
      const loginWindow = document.getElementById("loginWindow");

      document.body.scrollTop = 0;
      document.documentElement.scrollTop = 0;

      navigationWindow.style.display = 'none';
      loginWindow.style.display = 'block';
      mobile.classList.toggle("eventLoginWindow");
    };
    return (
        <header>
          <nav>
            <div id="burgerBtn" onClick={ () => handleBurgerBtn() }></div>
            <div id="loginBtn"><FontAwesomeIcon icon={ faUserCircle } onClick={ ()=> handleLoginBtn() } /></div>
          </nav>
          <div id="top">
            <div class="row">
              <div class="col-xs-8 col-xs-offset-2 col-md-6 col-md-offset-3">
                <img src={ logo } alt="" />
              </div>
            </div>
            <div id="localisation">
              <p class="text">Você está em</p>
              <p class="city">Botucatu <i class="fas fa-chevron-down"></i></p>
            </div>
          </div>
          <div id="searchBar">
            <div class="row">
              <div class="col-xs-12">
                <form>
                  <input 
                    type="text"
                    placeholder="O que: ex: pizzaria, drogaria, loja, etc."
                    class="form-control searchField"
                  />      
                </form>
              </div>
            </div>
          </div>
        </header>
    );
  }
}

The question is this: I have two functions and both have the same code snippet:

const mobile = document.getElementById("mobile");
const navigationWindow = document.getElementById("navigationWindow");
const loginWindow = document.getElementById("loginWindow");

I wonder if you have any way for me to use, declare these constants before the reuse functions in the two functions.

I thought about using state but could not implement. Could someone give me a help?

react components

2 answers

0

From what I understand, for you to arrive at this result, you would need the following:

1 - Functions can be removed from the "render" method and inserted above it (within the Header class) 2 - These constants you can create outside the class.

Your code would look like this:

import React, { Component } from 'react';
import { FontAwesomeIcon  } from '@fortawesome/react-fontawesome';

import './Header.scss';

import logo from '../../assets/images/logo.png';

import { faUserCircle } from '@fortawesome/free-regular-svg-icons';

const mobile = document.getElementById("mobile");
const navigationWindow = document.getElementById("navigationWindow");
const loginWindow = document.getElementById("loginWindow");

export default class Header extends Component { 
	handleBurgerBtn = () => {
     

      document.body.scrollTop = 0;
      document.documentElement.scrollTop = 0;

      navigationWindow.style.display = 'block';
      loginWindow.style.display = 'none';
      mobile.classList.toggle("eventNavigationWindow");
    }
    handleLoginBtn = () =>  {
      document.body.scrollTop = 0;
      document.documentElement.scrollTop = 0;

      navigationWindow.style.display = 'none';
      loginWindow.style.display = 'block';
		mobile.classList.toggle("eventLoginWindow");
    };

  render() {

    
    return (
        <header>
          <nav>
            <div id="burgerBtn" onClick={ () => this.handleBurgerBtn }></div>
            <div id="loginBtn"><FontAwesomeIcon icon={ faUserCircle } onClick={ ()=> this.handleLoginBtn } /></div>
          </nav>
          <div id="top">
            <div class="row">
              <div class="col-xs-8 col-xs-offset-2 col-md-6 col-md-offset-3">
                <img src={ logo } alt="" />
              </div>
            </div>
            <div id="localisation">
              <p class="text">Você está em</p>
              <p class="city">Botucatu <i class="fas fa-chevron-down"></i></p>
            </div>
          </div>
          <div id="searchBar">
            <div class="row">
              <div class="col-xs-12">
                <form>
                  <input 
                    type="text"
                    placeholder="O que: ex: pizzaria, drogaria, loja, etc."
                    class="form-control searchField"
                  />      
                </form>
              </div>
            </div>
          </div>
        </header>
		)
	}
}

  • Boy, didn’t work gives error: Typeerror: Cannot read Property 'style' of Undefined. I checked via console.log the return of the navigationWindow constant within the function at the moment of clicking, return null

  • In your example code I have no elements with mobile "id", navigationWindow and loginWindow. The elements I have identified with id are loginBtn, top, localisation and Searchbar

0

I got it using state, follow the code:

//Importando modulos
import React, { Component } from 'react';
import { FontAwesomeIcon  } from '@fortawesome/react-fontawesome';

//CSS
import './Header.scss';

//Imagens
import logo from '../../assets/images/logo.png';

// Icones
import { faUserCircle } from '@fortawesome/free-regular-svg-icons';

export default class Header extends Component { 
  state= {
    burgerBtn: '',    
    loginBtn: '',
    loginWindow: '',
    mobile: '',
    navigationWindow: '',
    searchWindow: ''
  }

  componentDidMount() {
    this.setState({
      burgerBtn: document.getElementById("burgerBtn"),    
      loginBtn: document.getElementById("loginBtn"),
      loginWindow: document.getElementById("loginWindow"),
      mobile: document.getElementById("mobile"),
      navigationWindow: document.getElementById("navigationWindow"),
      searchWindow: document.getElementById("searchWindow")
    })
  }

  handleBurgerBtn = () => {
    document.body.scrollTop = 0;
    document.documentElement.scrollTop = 0;

    this.state.navigationWindow.style.display = 'block';
    this.state.loginWindow.style.display = 'none';
    this.state.mobile.classList.toggle("eventNavigationWindow");
  }

  handleLoginBtn = () => {
    document.body.scrollTop = 0;
    document.documentElement.scrollTop = 0;

    this.state.navigationWindow.style.display = 'none';
    this.state.loginWindow.style.display = 'block';
    this.state.mobile.classList.toggle("eventLoginWindow");
  }

  handleSearchField = () => {
    this.state.navigationWindow.style.display = 'none';
    this.state.searchWindow.style.display = 'block';
    this.state.burgerBtn.style.display = 'none';
    this.state.loginBtn.style.display = 'none';
    this.state.mobile.classList.toggle("eventSearchWindow");
  }

  render() {


    return (
        <header>
          <nav>
            <div id="burgerBtn" onClick={ () => this.handleBurgerBtn() }></div>
            <div id="loginBtn"><FontAwesomeIcon icon={ faUserCircle } onClick={ ()=> this.handleLoginBtn() } /></div>
          </nav>
          <div id="top">
            <div className="row">
              <div className="col-xs-8 col-xs-offset-2 col-md-6 col-md-offset-3">
                <img src={ logo } alt="" />
              </div>
            </div>
            <div id="localisation">
              <p className="text">Você está em</p>
              <p className="city">Botucatu <i className="fas fa-chevron-down"></i></p>
            </div>
          </div>
          <div id="searchBar">
            <div className="row">
              <div className="col-xs-12">
                <form>
                  <input 
                    type="text"
                    placeholder="O que: ex: pizzaria, drogaria, loja, etc."
                    className="form-control searchField"
                    onClick={ () => this.handleSearchField() }
                  />      
                </form>
              </div>
            </div>
          </div>
        </header>
    );
  }
}

Thanks for the tips! ;)

Browser other questions tagged react components

You are not signed in. Login or sign up in order to post.