I'm using Heap analytics to capture events. What's frustrating is that I'm using styled-components and and-design, so events will be defined like so:
As a workaround, I'm adding IDs (or data attributes) to my components like this:
However, this is where my problem lies: I'm using a component library, Ant design and I'm trying to add an ID or data attribute to a Select component:
import Select from 'antd/lib/select'
<div id="headcount--dropdown">
<Select>
{props.options}
</Select>
</div>
However when I look at the event, I see something like this:
Where the auto generated selector should be #headcount--dropdown
I'm not sure how to get the auto generated selector to ONLY show my ID or data attributes. Could someone please help?
Related
Need to render ACF repeater in react. I am able to display ACF text Fields but not repeater fields. Need to find out if anyone has an example of how to map through a repeater field.
Repeater field group Is called Skills.
Im also new in this stuff, but I will try to help you.
So, the first thing that you need is to download and install ACF to REST API plugin so you can use ACF with Wordpress API. I assume, that you already have it, because as you said before - you can display text fields.
Once you can send data through Wordpress API, you need to preview of JSON sent by Wordpress (in this case), so you can display necessary data. Mine is called React Developer Tools and I installed it as Chrome extension.
Link to Chrome store
It should look like this:
As you can see, my component is called Home.js, yours may be called differently. Chose component that is fetching all the data that you need.
Now, you just need to use your repeater. It would be much easier if you showed us your code. I don't really know what kind of data you are calling through api, so I guess these are pages.
{ pages[0].acf.technologie_lista.map ( (field, index) => (
<div key={index} className="single-field">
{ field.nazwa_technologii }
</div>
) ) }
Let's break it down.
1 - My project contains two pages. I have chosen the first one, because only this one has needed ACF fields. technologie_lista is acf field name.
2 - You need to use map function to list all posts. You need to assign key to each element.
nazwa_technologii is just a repeater sub field name.
And that's all. I might make some rookie mistakes, but it work's for me. I hope that i helped. Cheers!
I'm testing my React application using Selenium IDE and want to add an unique ID ("data-testid" for example) to all elements so I'd be able to select them easily.
So far I encountered libraries which accomplish that by adding some code (react-html-id for example), but I'm looking for a solution which will add these data attribute automatically on build time.
For Example:
Given a component
<SomeComponent /> // returns <span>Hello World<span>
When building the React application, it should be resulted with:
<span data-testid="123">Hello World</span>
I am creating a cascading kind of layout where I have two Select components for Roles and Users, the functionality I want is working fantastic except a use case where upon clearing/removing a role or clearing all roles, the Users Select component is not clearing the MultiValue items however the dataset is being cleared properly.
Please guide me as to how to achieve the said functionality, may be I am missing something or probably some kind of issue.
Here's a code snippet - https://codesandbox.io/s/l98n1o6lq7
You can control it via value attribute on Select in react-select. Following is the code you can try and manipulate accordingly -
<Select
closeMenuOnSelect={false}
isMulti
options={showUsers}
value={showUsers}
hideSelectedOptions={true}
backspaceRemovesValue={true}
/>
Working Demo - https://codesandbox.io/s/9z02ql079p
I am trying build drop down with form like this. I used ng-repeat inside li to build a simple dropdown and then placed them inside next to another. the number of columns can also can be dynamic so my approach wont work. How do I proceed to build such a dropdown. Is there any library out there that does this I could not find one.Thanks in advance.
If you want to do this with Angular, you will need to toggle a dropdown. The following example should be able to get you started: http://jsfiddle.net/Lvc0u55v/10630/
You will need to compose the columns and associate them with the ng-model.
On Operator field you can do the following:
<input ng-model="operator"/>
<li ng-repeat="result in results | filter:operator</li>
I'm new on React (I more at ease w/ jQuery or AngularJS). I have a special case and I don't find a good way to resolve it...
My app contains an area which is like a "document viewer". It loads an HTML content from the backend (via API, using Fetch) and inject it in the "viewer" component. The HTML content loaded looks like an "university report" (it's just a formatted text, only <span> and <p> with class="..." attributes, nothing more).
Ex : <p>Lorem ispum <span>some text</span> loreb bis <span>ipsum</span></p> ...
I load the content, and inject it this way in the render() of my component <Viewer> :
<div dangerouslySetInnerHTML={ getFreshlyLoadedHTML() } />
Easy, it works just fine !
But... Now, I want to inject some "interactive" components in the loaded HTML. For example, some button to give a feedback etc. The API must decide where to place the component between the words/nodes of the formatted text (HTML).
Ex :
<p> Lorem ispum <span>some text</span>
loreb bis <span>ipsum</span>
<MyFeedbackButton paragraph="1.3"/>
</p><p>Other Lorem Ipsum<p><span>...</span>
There, I'm stucked because I cannot use dangerouslySetInnerHTML if there are components inside the loaded HTML...
First attempt : I've tried modifying the API, and instead of sending the HTML in a string to the app, I send a custom JSON structure that represents almost the final JSX structure that I want. Then, in my react page, the render function only have to parse the JSON and build the JSX (here, a JsFiddle example if it's not clear : https://jsfiddle.net/damienfa/69z2wepo/34536/ )
It works, but I can't believe it's the good way...
I see a major problem : all the HTML node (span, p...) that I build from the render function are referenced by reactJs, is it really necessary ? Mostly, there are "dead" nodes (I mean, dom node that won't never changed, this is static formatted text).
Just take a look a all those "data-reactid" on nodes that never will be interactive...
What would be your advice on that case ?
What about my attempt with a JSON-structure sent by the API ?
Is there a way to say to react "do not reference that element" ?
Do you clearly see a better solution to my problem ?
Your current workflow is not very secure and subject to many potential errors and open doors, especially concerning code injection ...
The overload due to react tracking the nodes is not an issue, React could track 10 000 nodes and not have a problem (well actually on many of my apps React has more than 100 000 nodes to care about and it still rurns perfectly).
I see different solutions here:
If there are only 3 or 4 possibilities of dynamic components and order, you might have components like "templates" to which you would simple send text arguments. This is the safest and easiest option.
If it doesn't suit your use-case but the JSON file can contain only a limited set of components, the components should be located in your main app, and then rendered with custom props from the JSON. Actually given the structure of data you could consider using xml instead of json and build a xml tree that you would parse and render. Only components from your white list would be rendered and it would limit drastically the potentials security issues. If needs quite some work on the XML parser though.
If the JSON file can contain many many different and unpredictable components or if the behaviour of those components is largely dynamic and independant of your app, you might as well consider using an iframe, with its own JS and HTML, so that this part of the code is isolated from the rest.
Try using an inline anonymous function within the inner content from within React using JSX. It works! Just be careful about how you wire up the data so there isn't a route where a user can inject HTML from an input or text field.
<div className="html-navigation-button">{(() =>
{
const CreateMarkup = ( sNavItemName :string ) => {
return {__html: sNavItemName };
}
var sTextToAddHtmlTo = props.nextNavItem.name.toString();
sTextToAddHtmlTo = sTextToAddHtmlTo.replace( "/", "/<wbr>" );
return (
<div dangerouslySetInnerHTML={CreateMarkup( sTextToAddHtmlTo )} >
</div>
);
})()}
</div>
I didn't override the React internals of 'render()', but only used a React Component with props wiring to pass down data to it for rendering.
I added the hook for 'dangerouslySetInnerHTML' deep within the return content of the React Component so there would be no easy way to intercept and manipulate it.
As such, there is no 100% guarantee on safety, but that's where adding good security to web services, databases, and use of CORS and CORB would be helpful to lock down security risks.