I understand, why I have to interact with DOM through dispatcher in cases when I fetching data from database.
But should i use Flux way to do something like this:
Parent component have been rendered. It has two child components. One of them initially rendered, the second child should replace first child onClick on some button. All components are static (no database connection).
So, how should I implement this action onClick and replace first child with second one?
Dispatch event once the onClick has been fired, parent component should listen and re-render the new item.
Related
I have a child component sitting inside a parent component. Parent component has some information, say I, which keeps changing based on user actions. In child component I have a button, and I want to change state of this button based on current value of I.
What is idiomatic way of doing it in scalajs-react/React?
Pass it via props and optionally use Reusability to prevent the child components from needlessly re-rendering too often.
I'm an embedded developer who is new to React and am struggling a bit with the behaviour of child components and nested child components.
I understand that for any component to be re-rendered, the state must change. I am using an example of a menu component that has an item component within. When some global level event happens, I want to change the text displayed by the item components.
Here is a fiddle that shows some code that I would expect to work:
https://codesandbox.io/s/dark-rain-8mfsp?file=/src/App.tsx
On clicking the div, the menu's setText function gets called, which calls into the item component, setting the state. This state is used in the render function of the item component, so I would expect both item and menu to be re-rendered.
Instead I get an error saying that I can't set the state of an object that hasn't yet been mounted. I would have thought it had been mounted..
Perhaps the way I have linked the declared components with those in the render functions by calling this.componentname.render() is the issue - but how else could that be done?
Thanks in advance!
Here is a working version of your sandbox.
https://codesandbox.io/s/lucid-bird-qecj0?file=/src/App.tsx:0-899
I see that you are new to react. I would suggest you use hooks instead of class components.
I have a main component which has 3 child components which are conditionally displayed. There are arrow buttons to change which child component is rendered. One of the children has states which need to persist even when the component is no longer the child which is displayed.
The problem is, I don't feel like the state data from this child component should be passed back to the parent as the method to maintain state. In this scenario i want the child's state to only live in the child component. Is there a method i could use to maintain this state? For example,
will the state persist if i render each child but use CSS (or some other option) to conditionally hide the non-active child?
You can add display: none, and the component will still be mounted and will keep the state. Although this might work I recommend lifting the state up to the parent. It seems like it should live there. Otherwise you can create a context wrapping the 3 children and manage the state there. Then in each child can subscribe to that context, but it seems like an over kill. I recommend lifting the state to the parent
I have a <Skylight ref="foo".... /> component in my main Layout. How would I show the modal dialog of Skylight from a child component?
I mean, how would I call this.refs.foo.show() in my component and make this.refs.foo point to the Skylight component that is 3 or 4 levels up in the DOM?
You could introduce a top-level container component for modal dialogs, that populates its children based on the state of a collection in your top-level store. Then the child component could dispatch an action to create a modal dialog.
I implemented something similar for toast-style notifications; will post an example when I'm back at a keyboard...
I have a third party child component which renders a table.
The parent component will render the child component with new data in props.
The parent will then use jquery selectors to select the rows from the child table that were thus rendered in this manner.
How can I get the parent to wait for the child component to render itself with the rows for the new data before it does the jquery row selection?
As the child is a third party component, I can't modify it to let the parent know when it's rendered.
You can use the appropriate lifecycle method to figure out when it's ready.
You can have componentDidMount send back a value telling the parent it's ready to be parse.
If you cannot edit the third-party component.. Check if there's available public method that you can use? Maybe it accepts a callback function as a prop?
I was able to workaround this by adding a mouse listener on the table itself and then using jquery's delegate method to route the click requests to the table rows.