I want to add a feature to my Button component wherein I want to add an as prop just like in other component libraries to render different components based on the as value.
Related
Here is what I am trying to achieve. I have an MUI table that contains a list of data (say student names) and it is a Functional Component. When a user clicks on any of the items in the table, it should load the details of the student clicked in a card or a box. (MUI components). The card has a back button that loads back the same table when clicked. I'm not sure how to achieve it without using react-router or without using conditional rendering.
The doubt that I have is, do we need to hide the details component in render from the main page, till it's clicked on? Like the whole tree needs to carry this component from MainPage(Hide)-> Table(hide) -> Student details(display it on click). Do I need to hide it from the main component render and only change the prop onClick in the table component? I'm not sure if we have a better approach, where I can directly call it in the table component?
You can use custom MUI Modal component to load the details to achieve your requirement without the need of react-router.
And to toggle the Modal, you can use onClick handler on MUI TableRow. TableRow doesn't have onClick prop, but the underlying component is React's tr by default, which accepts onClick.
In my REACT application, I'm trying to render a Component programmatically, but pasing to it any REACT context. Let me show you a simple example with this sandbox: https://codesandbox.io/s/kind-carson-u0hup?file=/src/App.tsx
As you can see, what I want to do is rendering <Dialog> programmatically when I click a button. But, inside that <Dialog>, I want to use any context created on the React Tree.
Unfortunately, I am aware that React.render does not pass any context, thus this cannot work: if you click on the button, you will see that, while the context in <InnerComponent> provides the value 'FooBar'. inside <Dialog> I have the default value 'initialValue'.
Thus, the question is, is there any way I can programmatically render a component, AND passing to its any kind of context?
I'm aware that React.createPortal does pass the context, but that method MUST be called inside the return statement of a component, while instead, in my case, I render the <Dialog> after a click on the Button.
Also, yes, I could always have the <Dialog> rendered, and use a prop isVisible.. But this is a simpler example.
I've read several things (some of these in the following links), but none of these really helped me:
https://github.com/facebook/react/issues/17974
Is it possible to pass context into a component instantiated with ReactDOM.render?
Why component rendered with ReactDOM.render loses react-redux context (Provider)
You can not put the render of component outside of your ContextProvider.
Check this link:
https://codesandbox.io/s/busy-curran-pbz6p?file=/src/App.tsx:0-834
I'm using dagre-d3 library for creating a flow path. I need to have custom component for every label but its not rendering react components, it however does render properly if the label is simple html. What do I need to do?
Following is a sample of what I'm trying to achieve, the first node should be the component but its rendering a simple empty box in place of that:
CodeSandbox URL
In my react app I used Formik form helper but it add area-autocomplete="list", when I try to add that prop react change my added value to "list" again on Focus. Even functions that change that prop didn't help.
How should the second parameter of the React TestUtils.Simulate.change.(MyDropdown, ???) look like to trigger a change, where MyDropDown is a component based on Material UI Dropdown component. If I don't provide any second parameter it looks like it returns a random Hash key instead of the provided MenuItem key.