I have a react component that in essence renders a contentEditable div. It is uncontrolled in that react doesn't control the content of the div.
class UncontrolledDiv extends React.Component<{}, void>{
public render(): JSX.Element {
return (<div contentEditable='true'></div>);
}
}
[This is a simplified version of a content-editable div that I have written]
I have functionality that clears the content of the div when a button is clicked. I want to unit test the same and so I want to manipulate the dom by actually adding content to the div and checking if it gets cleared when the button is pressed.
Any pointers as to how I can achieve this?
PS: I'm using enzyme as a test framework
Related
We use Reakit dialogs to prompt users to take an action in our React web app.
On some pages, we have specific text related to the action and would like to render this specific content in the dialog. On all other pages, we want to fall back to generic text.
Our simplified component hierarchy for generic pages looks like:
<BaseLayout>
...
</BaseLayout>
and for a page where we want to show specific text,
<BaseLayout>
...
<SpecificPage/>
...
</BaseLayout>
What we'd like to happen is:
On pages that render the SpecificPage component, the Dialog appears with the specific text
On pages that do not render the SpecificPage component, the Dialog appears with the fallback generic text
Our approach was to have the SpecificPage component render a Dialog with the page-specific text, and the BaseLayout component render a Dialog with the generic fallback text, but this approach isn't ideal -- users see a flash of the BaseLayout dialog before the SpecificPage dialog is rendered. Is there any way to define a single component that is "overridden" by descendants in the component hierarchy, or other way to achieve this conditional rendering?
You can simply check if you're rendering anything as children in the BaseLayout component or not, If not you can fallback to generic text.
Here's an example.
App Component
import React from 'react';
import { BaseLayout } from './BaseLayout';
export function App(props) {
return (
<div className='App'>
<BaseLayout>
<h1>Hello World.</h1>
</BaseLayout>. // Renders hello world
<BaseLayout /> // Render generic text
</div>
);
}
Base Layout Component
import React from 'react';
export function BaseLayout({children}) {
return (
<div>
{children ? children : "Some Generic Text"}
</div>
);
}
See https://github.com/ariakit/ariakit/discussions/1266#discussioncomment-2617748 for a solution and CodeSandbox that solves this problem well using the Constate library.
I have react component <MyComponent text="Hello">.
I'm adding this component from the Froala toolbar .
How to make react pickup this element/component and render it properly?
I am using
import { Nav } from 'office-ui-fabric-react';
function CustomNav(props) {
return <Nav groups={groups} selectedKey={selectedKey} onLinkClick={handleLinkClick} data-myTag="hello" />;
}
For nav object, I want to add custom html attributes such as data-myTag. How do I add this attribute to the button that is added to the DOM by this Nav object.
Based on looking at the source where Nav is rendered, it unfortunately looks like it isn't possible to add data tags to the container.
Your best bet would likely be to either:
Put the data attributes on a div you return from your CustomNav component, or
Create a pull request with Fabric itself which renders those data attributes
What I would like to do
Adding / extending existing functionality of the Speed Dial component. (refactoring into my own component)
What doesn't work
When I try to wrap the SpeedDial component inside my own component and embed it into a class or functional component it throws an error about invalid React Hooks.
how to reproduce this issue
Setup a main class or functional component
Setup a class or functional wrapper component around Material-UI SpeedDial
Implement the wrapper component inside the main (App.js) component
Results in an invalid hook call.
Dummy setup
// FAB.js
function FloatingActionButton (props) {
return (
<SpeedDial>
<SpeedDialAction />
<SpeedDialAction />
<SpeedDialAction />
</SpeedDial>
)
}
// App.js
class App extends Component {
render() {
<FloatingActionButton />
}
}
Important note
For all other components such as Button, Modal etc the above implementation just works. Probably because they do not yet implement react hooks.
I have a site that is not a spa. At one point when a button is click a div is created in the dom. After the div is created I want to render a React component into this div. My component looks like this
import React, { Component } from 'react';
class MyComponent extends Component {
constructor(props) {
super(props);
this.state = {
date: null
};
}
render() {
return (
<div>
//Here will be more controls
</div>
);
}
}
I'm running webpack on this file and in my original page I'm referencing the generated js file.
What code should I add to my button click code that is adding the div so I can render the component?
ps. Actually the functionality is a bit more complex, because we are scraping a page the user specifies and showing the html in an iframe through the srcdoc attribute. The scraped html has the div added and then we render a widget in the div so the user can preview what our widget would look like on their page.
You have to use ReactDOM to render the component. Install and import react-dom in your project so that webpack bundles it for you. You might need to expose ReactDOM as global in your web pack configuration.
Below is a simple code snippet:
ReactDOM.render(
<MyComponent/> ,
document.getElementById(id) // id of element in your case div created
);
Reference
https://reactjs.org/docs/react-dom.html