react-auth0 | This project was bootstrapped with Create React App | REST library

My component is supposed to retrieve the data for courses when the component mounts. The problem that I have is that whether I use the course Id or the course title as the key, I get the following error:

index.js:1 Warning: Each child in a list should have a unique "key" prop.

I have looked through the react docs, here on Stack Overflow, and tried different ways to get it to work. The only way I can get it to partially work is by adding an index as a parameter for map. When I use this method, I run into another problem and that is, it stops after the first iteration, even though there are 10 items. How can I fix this?

Here is my code:

CoursesPage.js

I am creating an auth0 spa login page with loginWithPopup(), but every time it responds with a misconfiguration error but the same works with loginWithRedirect() without any problem. Just like loginWithRedirect(), I want a username and password fields (in loginWithPopup()) where I can enter my credentials and redirect to the home page. Please look at the image for the error page.

I am working on authentication using Auth0 and react. I am using loginWithPopup() for the login popup screen. But every time I end up getting misconfiguration error(like you can see in the attachment). But if I remove the response_mode = web_message from the URL it works, is there any way to remove response_mode from code. I am using the react-auth0-spa.js given my auth0 quick start

I'm using React(react-create-app and TypeScript). Login is made with Auth0.

I want to write tests with Jest, and I found this ressource which is basically the only thing around that speaks about Mocking the Auth0 object.

So my code looks like this:

I'm using the auth0 token provided by the user on login to make api calls via useAuth0.getTokenSilently.

In this example, fetchTodoList, addTodoItem, and updateTodoItem all require a token for authorization. I'd like to be able to extract these functions out in to a separate file (like utils/api-client.js and import them without having to explicitly pass in the token.

I have been rewriting my website ondeband.com - it is currently a wordpress website and I am about a month into writing it in react.

I am not going to change the home page too much - it has a background image that changes every couple seconds. You can see it in my link above.

Problem is...on my new react version of the website - it flickers between each image change - speically when I pushed it to heroku. It works 99% of time on my local dev server.

I have a feeling it is due to the 'preloading' of the images? Maybe you can point me in the right direction - Here is my code for the home page of my app.

The div with the className of 'homePage' is where the bg image is loaded into the inline styles. The variable bgImage is stored in state. I use the useEffect hook to start the function, 'bgTransition', that changes each image randomly.

I have been stuck for a few hours now.. I am trying to send a component new props... but It wont get the new ones.

Here is what happens.

First the user clicks a button on the post component... It fires the function, 'add favorites' and 'addFavs' on the parent component below. These two functions determine if it should add the user to favorites or delete the user from favorites.

When the user is added as a favorite, the button they clicked, inside the searchResults component, appears a different color. The problem is they have to click the button twice for the new props to be sent back to the searchResults component and change the color - and I cant figure out how to get useEffect to send the component the new props.

Inside of the function 'addFavs', I call the origial search functions, 'getBands' and 'getTourBands' to fetch the updated data. This gets added to the states called bands, all bands, and tourBands. My theory was once this updated data gets added to the state, it would send the new props to my searchResultsComponent.

Thanks for your help - let me know if its too complicated.

So I'm using Auth0 for my user sign up. I'm trying to get the user id under sub:value to add to my database to identify with the post of a user. I'm trying to use a Context API in order to get the user info to put in my database.

react-auth0-spa.js

I am fetching the user's permissions from an API call. I get the permissions and push them to an array that will be sent as a prop to another component. The fetch_permissions function returns exactly what I need, yet it doesn't seem to be waiting for the function to complete before sending incomplete data. Here is my code: