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?
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
I'm using the react-to-print library but asking more generally - if I have a sidebar React component that I want to be printed on every page, is this possible? Kind of like a header/footer but a React component instead, that doesn't necessarily appear on the top or bottom of the page
I have an web application in React which have multiple react components used to render different views. For the particular use-case, the back-end vends out an action to UI layer, and for this particular action, the view has to be shown on modal.
The modal has multiple buttons in it on click of which, we have to map to existing react component inside this modal only.
So basically, until unless someone closes the modal, all the further screens on the click on buttons in this should be shown inside the modal.
Application uses React, Redux and Epics. Different URLs are not enabled for the component. I'm relatively new to the react, so don't completely understand the routing concepts.
Question:
How can I model this in a way which provides best user experience, is maintainable and allows me to re-use the existing components.
Approaches I have thought:
Create separate components for each existing one, which wraps the existing component around Modal. For e.g. I have component A, so I create another component AModal, which internally refers to A inside tags.
On each click of button inside original modal, I'll close this background modal and open the corresponding modal component, in the example above AModal.
Concerns: This will lead to hazy experience, as closing and opening of modals will be visible. Also depending upon the modal sizes for each individual components, experience might be even more degraded.
Create WflowContainerComponent which uses all of the original components inside it. So the modal and height/width is defined by the outer component and the view inside it changes as per the requirement and react/redux states.
Concerns: With every added functionality (i.e. button click on original WflowContainerComponent) have to include each individual component in it. And if each of the individual component requires certain inputs from the state, then the props list of WflowContainerComponent will keep on extending beyond control.
Is there a better way wherein, I can just let react know that render each of the next component on the modal only.
I don't know that this might be helpful or not. But what you can do, If all the existing components are connected to redux, Then you can create a Modal Container and pass the other components as children (with props) and remove the animation CSS Just for this component only, So it does not show like glitching.
I am trying to render other component when successfully submit form. Form has different rails layout and after form submit it redirect with different layout.
Render component using react-router and redirect object but how can I render it with layout. Also I want display flash message after form submit with react. So if reload the page after submit form it is not possible to set flash message in react component.
Any suggestion?
Thank you.
try this maybe it's helpful
https://github.com/reactjs/react-rails/issues/901
If you want to write the layout by using React Component, you should render your contents in the layout component. In this case, all props should be passed to the Layout component at first and then you can pass some props to the child components
I'm creating a math quiz app using react-native. I wish to know how to reload all the components, upon clicking the right answer, so that a new question is loaded.
You're looking the wrong way. Reloading all the components will just render the same thing. What you are looking for is more a thing like Redux.
It will allow you to have a state container where all your data live, allowing to store the question number and update it – then components will be rendered to display the new one.
Please take a look at redux documentation, then at react-redux one.
So you would create a dispatch method, e.g. setQuestion(...), which is called when you press a button that will change the question number. The button would be a presentational component.
Then, you would have a component that wrap the whole question screen that will be updated because it was bound with redux store. It is a container component.
See more about presentational and container component here.
If you still want to refresh your app, and don't want a predictive state, you could call app.forceUpdate() where app would be instance of the top component.