I can't figure out why this isn't working for me.
I have a Home React component, which, in app.js I import and show on the page through .
I have an IntersectionObserver linked in my index.html that looks at every Hidden class on my page, toggling the Show when it comes into view.
When I add a Div inside the Home component with that class (Which does gets rendered on the page), it doesn't add the class of Show.
What am I doing wrong?
I've also tried putting the IntersectionObserver into Home itself, but no dice.
Tried making it a function and calling it anywhere.
I've managed it by installing and using react-helmet!
Related
I'm working with a Chrome extension and embedding UI component on a user's site.
I wrote React component with Typescript (.tsx files)
The thing is, when I'm trying to embed the react component inside the site, the component just wont function - drop-downs wont open, buttons click wont do anything, components wont re-render on state change, etc... sometimes the components even lose all of it styles, like the css doesn't exist.
The only thing I could notice is that I'm embedding the components inside an iframe, idk if it has something to do with that or not - but if i put them outside the iframe - all works perfectly.
Im using render function to render the component on the site:
const element = ReactDOM.createRoot(#selector to create root#);
element.render(<MyComponent prop1="prop1" prop2="prop2"></MyComponent>);
Anyone had any experience with the type of issue?
Thanks!
As I mentioned - I already tried to embed the component outside an iframe and it worked
Assume I'm in some page that has so many interactable components and use useState hooks to handling component states. When I click the link on the navbar that route to current page I stay (same path) it look like nothing happens. I want to reset all states (hooks) like I just enter this page from somewhere else and also call getServerSideProps() function from the server again but I don't want to use window.location.reload() because it will reduce web performance. Is there any method possible?
I am building a website using React.
I am using Router from 'react-router-dom' to navigate between pages (urls).
Everything seems to work ok, but if I navigate between pages the layout style sometimes changes. For instance, the workouts page layout seems good and as I want, however, if I navigate from there to Gallery page and back, it looks different. Same goes for other pages.
I am adding a link to my Github page (the updated code is under 'main' branch). Also, you'll find beneath two pictures that demonstrate the different layout of the Workout page.
My Github repository Link.
Notice that sometimes it doesn't change the style, perhaps you will need to register, login, and logout.
Any Help will be appreciated!!
From peeking at your repo, my first guess would be that the problem is your css classes aren't scoped and are overruling each other when you render different components. When you import a css file like you do, it applies the rules globally, so depending on the order of the components you render, the rules are applied to all components in a different order. What you should do is:
Change your CSS file names to include module , for example Workouts.css should be become Workouts.module.css
Make your CSS imports act like a module, for example import styles from '../css/Workouts.module.css'
Change all your classes in the component to be from styles, for example replace <div className="row"> with <div className={styles.row}>
This way, if you have more than one component with the same class name, the rules of the class apply only to this specific component (i.e. scoped css)
That's my guess
I am using a lot of components combine together to make a UI of the website. As a newbie, I am not sure how can I change the css/style of the component when a new component renders. For example a component lets say SearchBar is on the component as the image below.
The SearchBar css makes it at the center of the page.
But when I click on the search button and the next component renders I want to change the css and take it to the top. Is this even doable?
I have a project that has a "service unavailable" component built in. Whenever this component is shown on a page, it is to hide certain navbar link items and only show a select few.
The navbar is also a separate component and each nav link item has it's own id.
Should I be using some like setState?
I'm new to react and any help is appreciated. If you need some code for me to add, also let me know.
I think global state is something you are looking for. Using redux you could easily set serviceUnavailable state and check it in navbar, and then render your links accordingly. You can learn more about approach, usage and installation here:
https://react-redux.js.org/