How do I get my css modules to work properly in react.js? - reactjs

Im building a burger builder app from a udemy course and while the code works fine, Im recieving errors that the app failed to load a resource
enter image description here
im new to javascript and react and im still learning how to debug my code so I am also having trouble finding which component the problem is in my code.

data.columns needs to be a 1-D array, you've used a 2D array.
And you're also accessing data.Date - Date is a reserved word, so maybe use lowercase date (its actually data in columns so a bit confusing there).
Let me know if this fixes it.

Related

Vscode is changing the code I wrote after saving the file, why?

[enter image description here](https://i.stack.imgur.com/lON9e.png)
I'm writing code for a task in a react course and after the file is saved it simply changes what I wrote and a bunch of errors appear and o I don't know why. The first pic is what I wrote, and the second one what happened after I saved the file. Can someone tell me why this is happening?
This never happened to any other code I wrote before.
Your VS Code settings are probably set to run a linter (ESLint maybe?) when you save your file. You can check your settings in the VS Code workspace settings: https://code.visualstudio.com/docs/getstarted/settings. If you hover over the red squiggly lines it will hint at the errors in your code.
It's been awhile since I've worked in React, but I think you might need to wrap your return in a string literal (backticks: ``). You also might want to use Typescript or JSX with React.
You can also post a sample on Stackblitz https://stackblitz.com/ if you want more help.

Convert Word to React markdown

Does anyone know of a way to translate Word syntax into react-markdown?
I am releasing a website to a client who is not very practical with writing using markdown.
So i thought maybe he could write the descriptions to add to the website on a Word file and then convert it into a markdown style and easy peacy.
Also, i tried to replicate this kind of list:
List item
buy using either + or * or - but react-markdown doesn't recognise them.
Any idea on how to takle the issue?Any info are more than welcome. Many thanks

Can you get good code from Anima in Sketch?

I have a twofold type question regarding Anima's export to code feature in Sketch.
As a designer it's tempting to think of your work straight to code but, the reality is it doesn't quite work like that. 
So, the first part of my question is: how good/reliable you think that code is?
The second part is an ask for help with the code.
So, I've created this super simple 2-page random quote generator in Sketch to call out bullshit on the President of Brazil (the crap the guy says...). I designed 3 breakpoints and all that but now that the code is here, I don't know how to do simple things like adding links to the buttons. 
Plus, when you click the big green button on the homepage you should be taken to the results.html where a .js is going to generate a sentence.
The .js is ready to go.
Here's the prototype link: https://winter-glade-8944.animaapp.io
Anima is already in its first age , the big problem that most of time , it will be stuck in one page , and you can't get the code of other pages ,
the best solution is to duplicate your project on Figma , then extract the first page's code , then delete this page from anime , then generate the code for the second page ,, and so on

How to web scraping Highcharts values?

I'm trying to get data from a Highchart, but I only have a "None" value.
The chart needs a password to be accessed, but I have the same problem with the chart on this page.
Using the browser's DevTools I can get the y value from highchart using:
Highcharts.charts[0].series[0].data[0].y
Thus, combining this code with a loop structure I can have all the y values.
The problem is when I try to use Selenium to webscraping those values. I'm using the code below
page.execute_script('Highcharts.charts[0].series[0].data[0].y')
The answer I expect is 2 (as in DevTools), but instead I'm getting "None" as answer.
I already tried to use Beautifulsoup to retrieve the y value from the <path> tag, but it doesn't meet the expected value.
The HTML source seems to be complex (I'm not expert in these area). The full xpath of the <svg> is:
/html/body/form/div[3]/div[2]/div[2]/section/div/div/div[2]/div/section/div/div/div/div[2]/div[2]/div[1]/div[2]/div/div/svg
Also, I can't find any <iframe>, which could be avoiding me from accessing the graph.
Does anyone knows what I'm doing wrong? (I'm beginner in this area, so let me know if any further information is necessary)
After a long time stuck in it, I figured out how to solve this problem.
My mistake is that I was sending to my browser, via selenium, the js script below to be executed.
page.execute_script('Highcharts.charts[0].series[0].data[0].y')
This code is working perfectly but it doesn't return to me any value. So, in order to have the y value (that is what I need), I just need to use a "return" in the previously code. The final code is
page.execute_script('return Highcharts.charts[0].series[0].data[0].y')

Liferay 7.1 npm-react-module localization

I'm trying to include localization into my npm-react-module, but I have failed receiving the value for the corresponding key from the Langugage.properties file. It simply returns the key. I did some research but I couldn't find any source that would help me solve my problem.
In the code which I will show you bellow, I have included a Language.properties file into my module. In my portlet, I have included the needed configuration for the language properties. I have also tried to add a separate file for a specific locale, but that didn't help me either.
This is an example of my portlet configuration:
"javax.portlet.resource-bundle=content.Language"
This is an example content from my Language.properties file:
example-key=example-value
This is how I'm trying to access the value in my React Component:
<h1> {Liferay.Language.get('example-key')} </h1>
But it only returns "example-key" instead of "example-value".
In my view.jsp file I am able to retrieve the corresponding values using
<liferay-ui:message key='example-key'/>
I have tried this method: https://portal.liferay.dev/docs/7-1/tutorials/-/knowledge_base/t/localizing-your-portlet but it didn't work either. Did anyone get this to work properly in their npm-react-module? I really don't want to spend time implementing my own localization service. Thanks!
Liferay.Language.get('key') gets text replaced by the build mechanism. Therefore there is no actual object/class to do this. I have been trying to get this to work myself and have resolved that I will have to do internationalization on my own.
localizing is done only in build time meaning if you have a language
key that generated dynamicly , you can't localizate it or for example
if you get a key from api fetch and need to localizate it, you can't
beacuse Liferay localization method for react (
Liferay.Language.get("yourLanguageKey") ) its undefined in runtime and
you can't use it.
from: https://npm.io/package/liferay-react-runtime-localization

Resources