Develop Reference

Set custom html attribute to child element of material ui component

I have to add the custom HTML5 attribute "data-metrics" to the span element, but I'm not sure how to achieve that using the ListItemText Material UI component.
Component API Documentation: https://mui.com/material-ui/api/list-item-text/
This is my code at the moment:
<li>
<ListItem button key={`list_item_${index}`}
component={Link} to={data.url}
activeClassName={classes.activeLink} partiallyActive={true}
focusVisibleClassName={classes.buttonOnFocus}>
<ListItemText primary={data.name}
data-metrics={`{"btnname":"${data.name.toLowerCase()}"}`}/>
</ListItem>
</li>
And this is what it is generating:
Attribute is being set to div element instead of span(child)
Note the data-metrics attribute is being set to the div element instead of the span.

I think you need to use the "primaryTypographyProps" prop inside the component. At least I think that's what the docs are saying.
I think you need to pass it an object like so:
<ListItemText primaryTypographyProps={{"data-metrics": "test"}} />

You can use useRef hook for this purpose, after you found an element in your ref.current object you can invoke ref.current.setAttribute("data-metrics", VALUE)
It forwards ref to a root element

Wrap div not rendering in React

I have a render() function that returns a div with content inside of it, such as:
return(
<div style={{background: "black"}}>
<[ReactComponent]>
<[AnotherReactComponent]>
...
</[AnotherReactComponent]>
</[ReactComponent]>
</div>
);
When I inspect the element, the outer div does not render, however the ReactComponent does.

maybe you should add some construction like this in the render method of RComponent
<View>{props.children}</View>

Clicking on a div that contains span, doesn't trigger onclick event - React

I have a div, and inside I am rendering spans based on some conditions. If the component has some children, I'd like this div to expand. It works fine if I click on this div on an area outside of the inner span.
An example, is the following Image. When clicking on the row, it expands the area to show items like this. However, when I click on the header text, it's not working, the on click event doesn't fire.
Here's my code:
<div className={headerStyles.header} onClick={(e) => this.selectHeader(e, this.props.items.length)}>
{this.props.items.length > 0 &&
<span className={headerStyles.expand} style={{ color: this.props.headerNameColor }}></span>
}
<span style={{ color: this.props.headerNameColor }} >{this.props.headerName}</span>
{this.props.headerUrl &&
<a
style={{ color: this.props.headerNameColor }}
href={this.props.headerUrl}
data-interception="off"
target="_blank"
title="Open link in a new tab">
<i className={['ms-Icon', 'ms-Icon--OpenInNewWindow', headerStyles.openNewTab].join(' ')}></i>
</a>
}
</div>
Here's the function that gets called when clicking the header:
selectHeader(e, numOfItems) {
if (e.target.children.length > 0 && numOfItems > 0) {
e.target.children[0].classList.toggle(headerStyles.expand)
e.target.children[0].classList.toggle(headerStyles.collapse)
e.target.parentElement.querySelector(`.${headerStyles.items}`).classList.toggle(headerStyles.hidden)
}
else if(this.props.headerUrl){
}
}
Any guidance is appreciated.
Thanks

As I suspected, you're trying to do something with the event.target value inside of selectHeader. That won't work very well because event.target will change depending on which element you clicked on inside of your div. It won't always be the outer "parent" element.
You're also trying to read data imperatively from the DOM, which is not a very "React" way of doing things. In fact, within your function you're doing a classList.toggle(headerStyles.hidden) which is in direct conflict with React managing the state and rendering of your app. All the data you need should live within the state of your React application - you shouldn't need to query the DOM at all.
Ditch event.target and classList.toggle and find a way to do it using React state. For example, when you click the div you could simply toggle the "expanded" state of your component, and use that state to determine which CSS class to render:
<div onClick={() => {this.setState({isExpanded: !this.state.isExpanded})}} >
<span className={this.state.isExpanded ? headerStyles.expand : headerStyles.collapse} ></span>
</div>

Try to add pointerEvents: 'none' style to the span tags so it won't get any mouse event. This will make the event.target to always be the div

Avoid using arrow functions inside the JSX here. e object is always passed since this is an event handler, and your props are accessible from your handler:
selectHeader = (e) => {
const numOfItems = this.props.items.length;
// rest of the code...
}
inside render method:
<div onClick={this.selectHeader}>

jQuery code is hiding all content inside my div

I have the following code:
jQuery(document).ready(function($) {
$("ul.accordion-section-content li[id*='layers-builder'] button.add-new-widget").click(function() {
$("#available-widgets-list div:not([id*='layers-widget'])").css('display','none');
});
});
The idea is, when i click a button that contains the class "layers-builder", all divs in "available-widgets-list" that DO NOT contain the class "layers-widget" are hidden.
The problem I'm facing is that using this code also hides all the divs inside "layers-widget" (as not all of them have "layers-widget" in the id.
for example, here is a mockup markup:
<div id="some-id">
...
</div>
<div id="this-layers-widget-89">
<div id="hello"></div>
<div id="yes"></div>
</div>
In the above example, the first div "some-id" would be hidden, along with all the child divs inside "this-layers-widget-89"
How can I make it so that all the content within the div containing "layers-widget" still shows?

The ">" operator specifies that the div must be a direct child of #available-widgets-list:
$("#available-widgets-list > div:not([id*='layers-widget'])").css('display','none');

You should add a class instead of relying on finding parts of some-id but this will work also work: $('[id*="some-id"]');
You should also be using jquery's built in hide()method instead of css('display', 'none'). They do literally the exact same thing but using the built in methods is more readable.

Create a div containing target div using jQuery

I think that this should be easy, but I'm not able to get it working. I want to target a div or other element using jQuery and then dynamically create a div containing the targeted element, for example:
jQuery ('.myclass')
How can I create a div with the background-color attribute set to white that contains 'myclass' element?
Initially I have: <div class="myclass">Some HTML elements inside</div>
And after executing the jQuery call i want to have: <div style="background-color:#fff"><div class="myclass">Some HTML elements inside</div></div>
I hope that you understand my question...

You can use the wrap function to put a wrapper around the matching elements. I'd prefer to use a class for the background, but you can assign CSS properties directly as well.
$('.myclass').wrap( $('<div></div>').css( 'background-color', '#fff' ) );
or
$('.myclass').wrap( $('<div></div>').addClass('white-background') );

var $myDiv = $('<div>').css('background-color','#fff').append( $('.myclass') );
You can then write this variable to the DOM as you see fit, or do whatever else you need to do.