CODEWITHSUNDEEP
javascriptreactjsecmascript-6
Dan Lee
Dan Lee

Reputation: 704

Converting JavaScript code to react component class format

I'm working on my first ever React app and trying to get my head around how I am meant to use small JS snippets in the page.

For example; I want to use the following Interactive SVG Chris Coyer created in my code. Adding HTML and CSS is easy but what should be the correct way of implementing the JS?

Copy and pasting into my home.js page clearly won't work.

Interactive SVG - Demo

var wordStates = document.querySelectorAll(".list-of-states li");
var svgStates = document.querySelectorAll("#states > *");

function removeAllOn() {
  wordStates.forEach(function(el) {
    el.classList.remove("on");
  });
  svgStates.forEach(function(el) {
    el.classList.remove("on");
  });
}

function addOnFromList(el) {
  var stateCode = el.getAttribute("data-state");
  var svgState = document.querySelector("#" + stateCode);
  el.classList.add("on");
  svgState.classList.add("on");
}

function addOnFromState(el) {
  var stateId = el.getAttribute("id");
  var wordState = document.querySelector("[data-state='" + stateId + "']");
  el.classList.add("on");
  wordState.classList.add("on");
}

wordStates.forEach(function(el) {
  el.addEventListener("mouseenter", function() {
    addOnFromList(el);
  });
  el.addEventListener("mouseleave", function() {
     removeAllOn();
  });

  el.addEventListener("touchstart", function() {
    removeAllOn();
    addOnFromList(el);
  });
});

svgStates.forEach(function(el) {
  el.addEventListener("mouseenter", function() {
    addOnFromState(el);
  });
  el.addEventListener("mouseleave", function() {
     removeAllOn();
  });

  el.addEventListener("touchstart", function() {
    removeAllOn();
    addOnFromState(el);
  });
});

Upvotes: 4

Views: 4869

Answers (1)

Rohith Murali
Rohith Murali

Reputation: 5669

You can use it by adding the wordStates and svgStates as class variables and manipulating those in component by adding the query selector functions into componentdid mount function like,

import * as React from 'react';
import { Component } from "react";
class Home extends Component {

 constructor(props) {
  super(props); 
  this.wordStates=[];
  this.svgStates=[]; 
  } 


  removeAllOn =()=> {
    this.wordStates.forEach(function (el) {
      el.classList.remove("on");
    });
    this.svgStates.forEach(function (el) {
      el.classList.remove("on");
    });
  }

  addOnFromList=(el)=> {
    var stateCode = el.getAttribute("data-state");
    var svgState = document.querySelector("#" + stateCode);
    el.classList.add("on");
    svgState.classList.add("on");
  }

  addOnFromState=(el)=> {
    var stateId = el.getAttribute("id");
    var wordState = document.querySelector("[data-state='" + stateId + "']");
    el.classList.add("on");
    wordState.classList.add("on");
  }
  componentDidMount() {
    this.wordStates = document.querySelectorAll(".list-of-states li");
    this.svgStates = document.querySelectorAll("#states > *");
    this.wordStates.forEach(function (el) {
      el.addEventListener("mouseenter", function () {
        addOnFromList(el);
      });
      el.addEventListener("mouseleave", function () {
        removeAllOn();
      });

      el.addEventListener("touchstart", function () {
        removeAllOn();
        addOnFromList(el);
      });
    });

    this.svgStates.forEach(function (el) {
      el.addEventListener("mouseenter", function () {
        addOnFromState(el);
      });
      el.addEventListener("mouseleave", function () {
        removeAllOn();
      });

      el.addEventListener("touchstart", function () {
        removeAllOn();
        addOnFromState(el);
      });
    });
  }
}

Upvotes: 2

Related Questions