React TabView component - keep Tab component state while changing tab - javascript

I'm trying to build a ReactJS component that i will release as open source that manages tabs and allows to load other components into the tabs by either create a new instance of the tab component each time you click it or reusing the same component instance until the TabView is destroyed.
I managed to create the first part of the component, and it works, but unfortunately the tabs seems always to attempt to create a new Loader component (which is responsible for either reuse an instance or create a new one.).
In the demo the companies and home count (wich can be increased by clicking) should remain the same even after changing tab and coming back. I can't save the count to the parent component because the tab will contain other complex controls and I can't keep passing the state to the parent.
How can I solve my problem? At the moment i'm saving the instance into a state property and reuse it, but it seems to not work. :/
Thanks for any futher help!
Source code: http://pastebin.com/zaqXwi4V
Online demo: http://matt93.altervista.org/demo

Related

Force re-render the react component in the jquery single page application or in static html site?

I have created one spa using JQuery. SPA is done via writing a custom router where we add visible classname to a page div to make that page visible and we remove the same classname from all the other pages using jquery like this,
$(".main-content .page").removeClass("visible");
const page = $(`#${pageId}`);
page.addClass("visible");
Now I am migrating this site to use react components here and there through out the website. I have one component on one of the page that shows product data based on the id in the URL but the problem is that it doesn't rerender even if I change the URL. It is not able to detect the change as state or props are not changing.
is there a way to force rerender this component from my other JS code?
The solution was pretty straight forward but it is not mentioned anywhere.
The official guide says to use this below code at the end of the file so that when our js file will be loaded by the browser and run then it will render our react code but the thing is we can call this method from anywhere to force rerender our component/ replace our component with the new instance.
To force rerender it, calling below method that adds the react code to the div worked.
ReactDOM.render(<ProductDetails />, document.getElementById("product-details"));
Using this we can even pass the new props also if we want to.

Can my React component listen to changes in the server and update itself?

I have a React component that renders a list of items. I have a different component which allows user to add a new item. This new item is created by making an async call to the server. Can the component that renders the list listen to changes in the server and update itself.
The new item is added through a modal hence when the modal is closed, an action needs to be triggered to update the component that renders the list of items. Right now I am having to refresh the browser to reflect the changes in the UI.
If I close my modal, there is no way I am triggering a change to the component that renders the list of items. I thought about adding the result of the async call which is a list item to the state using redux as a way to cause a re-render. However, the client I am interfacing with does not give back all the properties that the items requires (as a part of the Typescript interface). Hence this method won't work. An alternate way to force a re-render to the component that displays the list. But again, can't really think of a way that would be work and how would I trigger the componentDidUpdate hook.
if (the server supports webSockets) {
use webSockets;
} else {
use socket.io;
}

Unmount Vue inistance or remount in a new location

I am working on a project where a new feature is to be added. The feature uses a Vue instance that was created to live on one page. It grabs: window.location.href and creates meta data with some other info that can be shared to other users.
This now needs to have same share feature to live on a page that is dynamically created. I have several rows of information, each row (can be one row, can be 100 rows) has one dropdown that is populated with the info from the box that is clicked on. Within the dropdown, I need to have this share feature. I am able to get the first row to populate with the Vue instance with a shareWidget.$mount('some selector[with a data attribute="active"')
function. This works great no matter which row I click first.
The problem is that, as soon as I click on another row ($('some selector') is removed and a new $('some selector[with a data attribute="active"')) is added within the dropdown that is now part of the active row.
I cannot get the new selector to be populated with the Vue instance called sharingWidget. I have tried to destroy and mount again, but I get [Vue warn]: $mount() should be called only once. which is expected. Is there a way to make the Vue instance move to a new location or unmount then mount it again?
I do not believe that this can actually be done. Once a Vue instance is mounted, it cannot be mounted again. The Vue instance, as opposed to a component can only live in one place. My work around was that instead of each row having a drop down, only one ever exists. When I tile is clicked on, it gets the active row and appends the drop down to the bottom of it. So, as I said, unmounting and remounting do not seem to be a thing.

Using react router without loosing "setState" state?

I have a React app that takes the user through various steps. I want to have the ability to use the browser's "back" button to go back to a previous step. Now I'm thinking of using react-router to do this.
Currently, I am simply reacting to events and calling setState on my top-level component.
My question: Does all state have to be reflected in the URL, or saved into local storage? Or can I keep the component's state and just have react-router change some props on the top-level component? When I do that, do I risk loosing the component's state (e.g. because React doesn't identify the old and the new components)?
I want to have simple URLs like /step1, /step2... . These do not reflect everything that is going on in the app. Specifically, I don't need or want the ability to directly enter such an URL. There are also privacy concerns. I am happy with having the application's state in the main component's ephemeral state. In other words, my application's state is not a pure function of the route.
I want to mainly use react-router to make the back button act as a glorified undo / go to last step button, and only secondly to navigate to other components. Any idea or small snippet showing how to do that? Or is react-router not suited for this?
When React navigates from one component hierarchy to another (such as react-router links / history navigation) it only unmounts the components that do not exist in the new component hierarchy. State is only lost in unmounted components. If your state is properly stored at the top level which only goes through rerendering and not remounting, you should retain it.

Programmatically add/remove component with animation in Angular

I'm new to Angular, and cannot really find any good and clean answer to this question.
In a component I have a few buttons and a list ('li').
When a button is clicked it should create and add an instance of another component to the list. The different buttons should add different components.
I've successfully managed to add new instances via the componentFactoryResolver, but are having a hard time animating them the they are created or removed.
What would be a "correct" way (as the Angular team intended it) to dynamically add and remove components and animating it?
What you're looking for is navigation using Router.
I created a plunker here: https://embed.plnkr.co/sukXA2zRV7kEAq4MZDXY/
When you click A, an instance of Component A is created and added to the DOM and when you click B, the instance of A is gone and an instance of Component B is created.
HostComponent is the component where it has child routes defined. Notice how in the component, you don't actually reference any of these "child" components at all. The parent child route relationship is defined inside the app-routing.module.ts.
I recommend taking the time to read the Router guide from start to finish as this is one of the key aspects of developing in Angular 2:
https://angular.io/docs/ts/latest/guide/router.html
Good luck!
EDIT Added route animation for ComponentA and updated plunker link.

Categories

Resources