We Keep Coding

React Syncing element from Virtual DOM with element from HTML DOM

I have a react component which contains a 3D animation with playback controls (pause/play) inside a HTML page and I need the controls to be synced with some buttons outside the react component.
The controls in react are implemented like this
<Button color='red' onClick={() => { setDataPlayback(false); }} > <Icon name='pause' /></Button>
<Button color='red' onClick={() => { setDataPlayback(true); }} > <Icon name='play' /> </Button>
and the buttons in the html page are
<div id="btns">
<button id="html-button-pause" onclick="python_function_pause()"></button>
<button id="html-button-play" onclick="python_function_play()"></button>
</div>
So whenever I press a button in react, I want it to trigger a click on the html button.

I think this should work:
<Button color='red' onClick={() => { setDataPlayback(false); python_function_pause(); }} > <Icon name='pause' />
And the same for the other button. You can invoke click of an HTML element programmatically using .click() function. You can read more about it here.

How do you style custom data grid toolbar items?

I have this toolbar with 2 custom buttons and 3 imported material data grid toolbar components, I want them to match but preferably apply the material styles to my custom components yet I can't find a style import for them anywhere in their docs. But anyway I can get them to match would be huge. Does anyone have some advice?
const Toolbar = () => {
return (
<GridToolbarContainer>
<div
className={classes.toolbar}
onClick={() => {
toggleSearch();
}}
>
<SearchIcon />
<p>SEARCH</p>
</div>
<div
className={classes.toolbar}
onClick={() => {
bookmarkCases(selectedRows);
}}
>
<BookmarkBorderIcon />
<p>SAVE CASES</p>
</div>
<GridColumnsToolbarButton />
<GridDensitySelector />
<GridToolbarExport />
</GridToolbarContainer>
);
};

Instead of making an icon button out of a <div>, why not use the startIcon prop in an MUI <Button />, e.g.
From this:
<div
className={classes.toolbar}
onClick={() => {toggleSearch()}}
>
<SearchIcon />
<p>SEARCH</p>
</div>
to this:
<Button
className={classes.toolbar}
onClick={() => {toggleSearch()}}
startIcon={<SearchIcon />}
>Search
</Button>
All the styles should match because MUI DataGrid toolbar buttons are just MUI Buttons

After a bit of a struggle I found a solution. I was able to achieve a consistent style for all toolbar buttons by passing the styles through the DataGrid itself.
export const StyledDataDrid = styled(DataGridPremium)<DataGridPremiumProps>(({ theme }) => ({
'& .MuiDataGrid-toolbarContainer': {
'& .MuiButton-text': {
fontSize: '16px !important',
color: '#074682',
},
'& .MuiBadge-badge': {
backgroundColor: '#074682',
},
},
}));
Or you can style it on the DataGrid component using the sx property as explained in this issue: https://github.com/mui/mui-x/issues/3686#issuecomment-1018469717

How to use Font Awesome Icons with Text using ternary operator in React JS?

So I have a button and when I click the button the text changes and I managed to change the text after click using ternary operator and now I want to add icons from font awesome before the text. I used hooks to change the button text. Is there any way I can add these icons before the text ?
Code
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome'
import { faPlus,faCheck } from '#fortawesome/free-solid-svg-icons'
const [disableBtn,setDisableBtn]=useState(false)
const [btnText,setBtnText]=useState(true)
<div class="buttons">
<button className={disableBtn ? "addToClub disable":"addToClub"} onClick={()=>{handleTransfer(props.players);setBtnText(!btnText);setDisableBtn(true)}} >
{btnText? <FontAwesomeIcon icon={faPlus} /> "Add to Club" : (<FontAwesomeIcon icon={faCheck} /> "Player Already Added") }
</button>
</div>

You can use react fragment to wrap the font awesome icon component and the text.
Note: <>some content</> is shorthand for <React.Fragment>some content</React.Fragment>.
<button
className={disableBtn ? "addToClub disable" : "addToClub"}
onClick={() => {
handleTransfer(props.players);
setBtnText(!btnText);
setDisableBtn(true);
}}
>
{btnText ? (
<>
<FontAwesomeIcon icon={faPlus} /> Add to Club
</>
) : (
<>
<FontAwesomeIcon icon={faCheck} />
Player Already Added
</>
)}
</button>;

OnBlur closing react component if clicked inside

I have created a React component using Material UI as below
<Popper
open={open}
anchorEl={anchorRef.current}
onBlur={handleToggle}
transition
disablePortal
>
<MenuList autoFocusItem={open}>
<MenuItem>Tom</MenuItem>
<MenuItem>Patt</MenuItem>
</MenuList>
<input type="text" name="Student" onChange={getStudent}></input>
</Popper>
In the above component i have MenuList and TextField. I tried to add onBlur={handleToggle} thinking that, it will close the component if clicked outside of it but its closing even when i am trying to add text in TextField using onChange={getStudent}, Why is it happening and how to close Component only if clicked outside of it? Thanks.

You can use ClickAwayListener component to detect whether the user is clicking outside of the Popover area.
<ClickAwayListener onClickAway={() => setOpen(false)}>
<span>
<Popper
open={open}
anchorEl={ref.current}
transition
disablePortal
>
<MenuList autoFocusItem={open}>
<MenuItem>Tom</MenuItem>
<MenuItem>Patt</MenuItem>
</MenuList>
<input
type="text"
name="Student"
/>
</Popper>
<Button variant="outlined" onClick={() => setOpen((o) => !o)} ref={ref}>
Nothing
</Button>
</span>
</ClickAwayListener>
Live Demo

How to use text instead of Icon for react-toolbox menu?

I am using react-toolbox menu for my website. Based on the example given in the documentation React-toolbox menu, I can only use icon as my menu. How can I use text for the menu instead?
Example of what I want to do:
When I click the blog text which is a menu, the menuItem will be shown.
Is it possible to do this?

just remove icon property from MenuItem component
<IconMenu icon={<div>blog</div>} position='topLeft' menuRipple>
<MenuItem value='download' caption='Download' />
<MenuItem value='help' caption='Favorite' />
<MenuItem value='settings' caption='Open in app' />
<MenuDivider />
<MenuItem value='signout' icon='delete' caption='Delete' disabled />
</IconMenu>

You can pass an element to the icon property like that:
<IconMenu icon={<div>Menu</div>} position='topLeft' menuRipple>

In case someone else has the problem, the solution is to use Menu component instead of IconMenu. Like this :
const [menuActive, setMenuActive] = useState(false);
return (
<div style={{ position: 'relative' }}>
<Button label='Actions' onClick={() => setMenuActive(!menuActive)} />
<Menu position='topRight' active={menuActive} onHide={() => setMenuActive(false)}>
<MenuItem value='download' caption='Download' />
<MenuItem value='action' caption='Action' />
</Menu>
</div>
);