0

I am having an issue with extracting a number from a string in react. The solution I used works fine on the local machine but doesn't work as required when push into production. I tried on netlify and heroku but getting same result.

I fetch the data from a text file which has a list of content and further detail for each of the heading. Link to the text file is here: Link to text file from where I am fetching the data

For example:

  1. Game Concepts 100. General 101. The Magic Golden Rules
  2. Parts of a Card 200. General 201. Name
  3. Card Types 300. General 301. Artifacts

So, I am separating the main headings i.e. 1. Game Concept, 2. Parts of a Card, 3. Card Types and subheadings i.e. 100. General, 101. The Magic Golden Rules, 200. General, 201. Name, 300. General, 301. Artifacts etc... from that text file.

As I mentioned earlier, the method I tried works fine on local machine but as soon as I push the code to production I get the list as it was earlier + the new list that is separated. I tried this as well:

parseFloat([heading]) + "." < 5 , parseFloat([heading]) < 5

...but didn't get desired results.

I have no idea what to do, I shall be grateful for getting some help on this issue.

Below is App.js:

import { useState, useEffect } from "react";
import url from "./MagicRules.txt";
import "./App.css";

function App() {
  let tempdata = [];
  let dataSplit = [];
  let headings = [];

  const [newdata, setNewData] = useState([]);
  useEffect(() => {
    temp();
    // eslint-disable-next-line
  }, [0]);
  const temp = async () => {
    tempdata = await (await fetch(url, { mode: "no-cors" })).text();
    dataSplit = tempdata
      .split(/^\s+|\s+$/gm)
      .filter((element) => isNaN(element));
    dataSplit = dataSplit.slice(0, dataSplit.lastIndexOf("Glossary"));
    headings = dataSplit.filter((heading) => parseInt([heading]) + "." < 5);
    let newHeadings = [...new Set(headings)];
    setNewData(newHeadings);
  };
  return (
    <div className="App">
      {newdata.map((heading, index) => (
        <ul key={index}>{heading}</ul>
      ))}
    </div>
  );
}

export default App;

This is in production

This is what I get on local machine i.e. localhost:3000 and this is the result I want

trincot
  • 317,000
  • 35
  • 244
  • 286
xiang
  • 95
  • 2
  • 10
  • 1
    What if you `console.log(tempdata);` in production? What value of `tempdata` is logged? – Rocky Sims May 22 '22 at 19:57
  • The solution works fine on local machine. So I get the list of main headings when I console.log(tempdata) on local machine but I get list of all headings when I push the same to production. I am checking it every time I make any change and then push it to production to check if it worked. – xiang May 22 '22 at 20:01
  • tempdata has everything what is in the text file. – xiang May 22 '22 at 20:02
  • Do you know how to view console log messages in production? Heroku does have a way to do that. – Rocky Sims May 22 '22 at 20:03
  • Well, I didn't know that. I tried once on heroku and after that on Netlify. Each time I make any change, I push the code to production on netlify and then check. This is how I am doing atm. – xiang May 22 '22 at 20:05
  • 1
    "no-cors" is will make the response be empty. You probably misunderstand what it is for. See [this Q&A](https://stackoverflow.com/questions/43317967/handle-response-syntaxerror-unexpected-end-of-input-when-using-mode-no-cors) – trincot May 22 '22 at 20:09
  • If you're able to test it on heroku, you can click on "More" and then "View logs" to view the logs for your heroku app. – Rocky Sims May 22 '22 at 20:11
  • Yes, i can see the logs on heroku app and everything looks fine to me. Could you please elaborate a little bit about what I should expect from a log file to identify the issue? – xiang May 22 '22 at 20:17
  • If you `console.log(tempdata);` on production, I'd expect you'd see something other than the text you're expecting (probably a blank string or possibly a string with a different newline character or something). If you're seeing the expected text, try copy pasting it into your local copy via `tempdata = "the copy and pasted string here";` and see if it still works locally with the string copied from production. We're trying to split the problem space to find out which part of your algorithm isn't working as expected. – Rocky Sims May 22 '22 at 20:21
  • I'm not sure how the react code is recompiled, but try to define your `temp` function before calling `useEffect`? – W.S. May 22 '22 at 22:27

1 Answers1

0

Thanks everyone for the help and suggestions. There was a line break ('\n') on those indexes as can be seen in the first picture. I figured that out by using console.log(headings) in the code and deploying that to Netlify/Heroku and after visiting the link, I found that in the console of the browser.

The issue was in the regex used in the split function. I made a small change of 's+' to 's*' which solved the issue. i.e. split(/^\s+|\s*$/gm) instead of split(/^\s+|\s+$/gm).

Hope this would be helpful for others.

xiang
  • 95
  • 2
  • 10