Converting JavaScript code to react component class format

Question

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);
  });
});

Is there a certain reason you want this in react? If you wanna build it "the React way" then you will need to break the pieces down to components. I would break this into 3 components (App, Map and List) where Map and List share props from the App which holds the state for the hovering events and such. — MstrQKN
– MstrQKN, Commented Jun 4, 2018 at 7:55
No I haven't tried anything yet. This is a question clarifying execution - what am I meant to do? I noticed the title was change to "react component class format". So I'm guessing I need to create a component class? — Dan Lee
– Dan Lee, Commented Jun 4, 2018 at 9:55

Rohith Murali · Accepted Answer · 2018-06-04 10:42:02Z

2

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);
      });
    });
  }
}

edited Jun 4, 2018 at 10:42

answered Jun 4, 2018 at 7:53

Rohith Murali

5,6692 gold badges27 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Dan Lee Over a year ago

Hi I get the error: Failed to compile ./src/app/Home.js Syntax error: Unexpected token (28:10) > private wordStates; This error occurred during the build time and cannot be dismissed.

Rohith Murali Over a year ago

I have edited the code to intialise the private variables to empty array, pls make this change and retest

Dan Lee Over a year ago

I'm afraid I'm getting the same error. Syntax error: Unexpected token class Home extends Component {private wordStates=[];

Rohith Murali Over a year ago

Oops, that private specifiers are not supposed to be there. Sorry. I have been using react in typescript, hence I didnt notice those lying around. :) Pls check now

Rohith Murali Over a year ago

Made a small change again to add constructor It will be more proper to intialise the variable inside the constructor.

|

Collectives™ on Stack Overflow

Converting JavaScript code to react component class format

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related