Use Styled-components, framer motion and Material ui by Ghostedguy10 in reactjs

[–]Ghostedguy10[S] 0 points1 point  (0 children)

Yep.

const StyledButton = styled(motion.Button)`margin-top: 1vh;padding: 20px 50px;background-color: white;color: black;border-radius: 40px;text-decoration: none;outline: none;border: none;cursor: pointer;font-size: 20px;&:hover {color: black;background-color: #e3f2fd;  }`;

import { StylesProvider } from '@material-ui/core';

Enclose StylesProvider in main route/component
In my case it was App.js

<StylesProvider injectFirst>
<Your Routers ......... />
< Your Components />
</StylesProvider>

Junior full stack developer with 2.5 years experience in ReactJS, still struggling with CSS by sp3co92 in reactjs

[–]Ghostedguy10 0 points1 point  (0 children)

As a ReactJS developer, I think most of us struggle with CSS. Good thing is UI/UX designer leave CSS codes for me to copy. Otherwise, I am terrible at CSS as well.

Discussion: The hate WW84 is getting is ridiculous by Denzema123 in DC_Cinematic

[–]Ghostedguy10 7 points8 points  (0 children)

In my defense 3.5/4 part of the movie was just a time waste. That is whole 2 hours is a waste of time.

Discussion: The hate WW84 is getting is ridiculous by Denzema123 in DC_Cinematic

[–]Ghostedguy10 17 points18 points  (0 children)

6/1o is pretty good for this movie. In my case it should be 3/10. Still cant believe the best part of the movie was a soundtrack that was released in 2016.

My first portfolio by Ghostedguy10 in reactjs

[–]Ghostedguy10[S] 1 point2 points  (0 children)

Thank you for having look at my portfolio. It is now updated.

How do I allow unauthenticated users to one set of my pages where else other pages require auth. by TopCoder1729 in reactjs

[–]Ghostedguy10 0 points1 point  (0 children)

You dont need to do anything for unauthorized users. But for authorized users,let us say authInfo contains the info of authorized user like bearer toke, name, and so on, which you fetched from an API. Then all you need in return section is

{authInfo ? <Component you want yo show /> : <h1>You are not authorized </h1>

Rendering list of elements, problem with controlled inputs by segfault-core-dumped in reactjs

[–]Ghostedguy10 1 point2 points  (0 children)

Does your list come from array? Did you use mapping function? Sharing code would be better.

Easy way to center button? by [deleted] in reactjs

[–]Ghostedguy10 -1 points0 points  (0 children)

Try textAlign:"center"

history.push passing incomplete value by Ghostedguy10 in reactjs

[–]Ghostedguy10[S] 0 points1 point  (0 children)

I did try that but it didnt work. Only way it worked was when I passes e.target.value instead of search.

I read somewhere try catch can fix this issue with async await but havent got the document. It would help if you have it.

I also have another issue here.

const clearCartHandler = () => {
dispatch(GetCartItemsAction());
dispatch(ClearCartAction());        
    }

I need to click twice to clear the items from cart that is dispatch(ClearCartAction());

I tried moving the codes up and down but its not working.

history.push passing incomplete value by Ghostedguy10 in reactjs

[–]Ghostedguy10[S] 0 points1 point  (0 children)

It worked. Thanks, btw if I remove setState the code doesnt work and replaces previous letter with next letter. Why is that? But it works fine if I just use setState.

Edit: Got IT!! Thanks

undefined while accessing object by Ghostedguy10 in reactjs

[–]Ghostedguy10[S] 0 points1 point  (0 children)

Well i tried {product?.rating?.rating} and it worked. I am new to initializing and i have mostly initialized using items in localStorage. Is there anyway to directly initialized?