tachyons | Functional css for humans | Frontend Framework library

I am a beginner to learn about React. I tried to follow up on one Udemy lecture but my searchbox didn't work as well even though I rewrite the code three times... Could you check this code why my searchbox didn't work? If I type some words in searchbox, it should show matched cards(write down name on search box and it shows a matched card)

I will share my code bellow

This is index.js

We are building a White Label platform using React, GatsbyJs and Ant Design. We are stuck with Gatsby and Ant Design because we are migrating from an existing system and changing any of those would bring huge impact. Also, we must have a single deploy. Having a build for each White Label is not an option.

So, we need to be able to change style (mainly color) at runtime.

The problem is: Ant Design uses less variables to define it's themes and we're not able to change them at runtime, not even with less's modifyVars.

The thing is we MUST change less variables, and not global CSS or use other means

Ant Design derivates the main variables many times to get adjacent properties. So, for instance, if we define @primary-color as red, when we add a Button to the screen, Ant Design also defines it's border color, hover color, and many other details with different shades of red.

This means that, if we were to use other styling tool, we would need to generate those color derivations and replace every little property for every component. This would be chaos.

Scenario

We are using gatsby-plugin-antd and gatsby-plugin-less to load less and change vars at build time. Our gatsby-config.js looks like this:

I'm building a webapp with react and i get this warning:

I'm building a weather webapp usign React and the openweathermap.org api. Until yesterday everything was going in the right direction. Today I resumed writing code but the API call does not produce any results (from how I did in the code below I get an infinite loading). I don't understand where the problem is, also because I haven't changed the code since the last time it worked and I don't get any errors in the console section of the browser.

Here the code:

I have a page like this see page

It does filtering and stuff. But however, i want to add a level called 'Upper Basic' to each language if the language is:

• Japanese
• German
• Dutch
• Italian
• Arabic
• Chinese
• Russian
• Spanish
• French
• Korean

My code for the page is:

How can I fix this error being thrown?

Error: CountryList(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null

To me it looks like a function is being passed and I am completely lost as for what to do to fix this error. I know passing this code directly to onChanged works, but for some reason when the onSearchChange method is passed as a parameter to the Searchbox it thinks it is an object

Here is the code in question

This is the error I am getting(can someone please also explain to me why such errors are occurring and if there is a way to update the npm to the version of react I have.):

This is my first react app I'm creating an Music player using Create react app, I want to pass my state "Albums.js" as props in Details Component (Like, for src and image), so it can change it cover image and song according to the Album.js , but its Gives me error (Type Error: Cannot read property 'img' of undefined ) here is the code :

App.js