We Keep Coding

Change State while hovering Button?

I´m at a bit of a loss. I´m fairly new at React. I have a background video which is playing through React.Player and I want to change the URL of it (they are local files in the project) while I hover the button.
I managed to change the url with the use of useState when I click the button with the onClick function. However, whileHover is not working for me :/ can someone help me out?
const [text, setText] = useState("videos/planet.mp4")
return (
<div
<div>
<Button whileHover={() => setText("videos/Transition.mp4")} >
"testbutton"
</Button>
</div>
<motion.div class="react-player.full">
<ReactPlayer
url={text}
width="120%"
height="120%"
playing="true"
loop="true"
align="center"
/>
</motion.div>
</div>
)
That´s not the whole code, just these two important things.
EDIT
solved it by adding a motion.wrapper around the button.

Use onMouseEnter and onMouseLeave
const [text, setText] = useState("videos/planet.mp4")
return (
<div
<div >
<Button
onMouseEnter={() => setText("videos/Transition.mp4")}
onMouseLeave={() => setText("videos/planet.mp4")} >
"testbutton"
</Button>
</div>
<motion.div class="react-player.full" >
<ReactPlayer
url={text}
width="120%"
height="120%"
playing="true"
loop="true"
align="center"
/>
</motion.div>
</div>
)

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 place two icons in a button

I am trying to place two icons one is related to wordDocument and other is related to download icon on and button but one icon is overriding another icon, this is the code:
import { FileWordOutlined, DownloadOutlined } from '#ant-design/icons';
return (
<Fragment>
<Button
type="primary"
style={{ width: '30%' }}
onClick={() => {
authProvider.getIdToken().then(token => {
downloadFile(
`${process.env.REACT_APP_API_URL}/api/Projects/${projectNumber}`,
token.idToken.rawIdToken
);
});
}}
icon={((<FileWordOutlined />), (<DownloadOutlined />))}
size="small"
>
Basis of Design
</Button>
</Fragment>
);
and the button image is looking like this right now
I am looking to place icon <FileWordOutlined /> on the right side of the text Basis of Design and <DownloadOutlined /> is on the left side of the text.
Could anyone please let me know is there any way to achieve this?

The icon props take only one component. So you won't be able to pass two-component there.
There are two ways to get 2 icons.
Remove the icon prop and use the 2 icon Component,for ex,<FileWordOutlined />, <DownloadOutlined /> as children to the Button prop.
<Button type="primary">
<FileWordOutlined />
Basis of Design
<DownloadOutlined />
</Button>
If you want to use the icon prop you use it like this:
<Button
type="primary"
icon={<FileWordOutlined />}
size="small"
>
Basis of Design
<DownloadOutlined />
</Button>

What you are doing isn't working because you are setting icon to the returned value of ((<FileWordOutlined />), (<DownloadOutlined />)), which is <DownloadOutlined />.
You can omit icon and put the icons and the button text inside Button instead:
<Button
type="primary"
size="small"
>
<DownloadOutlined />
Basis of Design
<FileWordOutlined />
</Button>
demo

If you want to get 2 icons then create icon prop like this:
<Button icon={your primary icon}>
{text}
{extra icon}
</Button>
So the Element would look like
<My Button
icon={<icon name/>}
text={text}
extra icon={<extra icon name/>}
/>

passing props in React with a map function

I know how to pass basic props in React but I am a bit stumped on this one. Rather than try to explain all of it in this paragraph I think showing will do better justice to the problem.
Here is how it was before trying to break it off into its own separate component.
{ <div className="flex-item-main">
<ol>
{this.state.thoughts.map((thought, index)=>
<DisplayPoem className='displayPoem' key={index} onClick={() => { this.handleDeleteClick(index) }} name='Delete Thoughts' value={thought} />
)}
</ol>
</div> }
Here is how it will look as its own separate component taking props from the parent:
{ <div className="flex-item-main">
<ol>
{this.props.thoughtsProp.map((thought, index)=>
<DisplayPoem className='displayPoem' key={index} onClick={this.props.onClick} name={this.props.name} value={thought} />
)}
</ol>
</div> }
Here is the parent component passing down the props: I have no idea what to do with onClick={() => { this.handleDeleteClick(index) }} as I need index from the .map() function in the component. I hope any of this made sense and I am happy to add updates, im not sure how to explain the problem which is probably why im having trouble solving it. Still new to React.
<DisplayPoemList thoughtsProp={this.state.thoughts} onClick={() => { this.handleDeleteClick(index) }} name='Delete Thoughts' />

You could remove the arrow function from props and pass you method as a prop.
Change this code (look at the onClick):
<DisplayPoemList thoughtsProp={this.state.thoughts} onClick={() => { this.handleDeleteClick(index) }} name='Delete Thoughts' />
To this code:
<DisplayPoemList thoughtsProp={this.state.thoughts} onClick={this.handleDeleteClick } name='Delete Thoughts' />
Then your DisplayPoemList will get a function onClick that expecting for index when it called.
Use an arrow function to create an instance of the function with an index in a scope for each element.
{ <div className="flex-item-main">
<ol>
{this.props.thoughtsProp.map((thought, index)=>
<DisplayPoem className='displayPoem' key={index} onClick={() => this.props.onClick(index)} name={this.props.name} value={thought} />
)}
</ol>
</div> }

Adding a icon to React Bootstrap Dropdown

I'm trying to add an icon to my react dropdown button as shown in the following button.
I couldn't find a way to implement this with the react bootstrap package i'm using.
https://react-bootstrap.github.io/
I tried using the normal bootstrap 4 to to this. But found out that it needs jquery to open the dropdown menu. How can i add a icon to my react bootstrap drop down?
My code
<DropdownButton id="example-month-input-2" title={this.state.weekselectedType}>
<Dropdown.Item onClick={() => this.changeWeekValue('a')}>A</Dropdown.Item>
<Dropdown.Item onClick={() => this.changeWeekValue('b')}>B</Dropdown.Item>
<Dropdown.Item onClick={() => this.changeWeekValue('c')}>C</Dropdown.Item>
</DropdownButton>
I managed to remove the default dropdown icon using the following css
.dropdown-toggle::after {
display:none !important;
}

React Bootstrap allows you to customise Dropdown by passing in custom subcomponents. To customise the toggle button, you can use:
// The forwardRef is important!!
// Dropdown needs access to the DOM node in order to position the Menu
const CustomToggle = React.forwardRef(({ children, onClick }, ref) => (
<a
href=""
ref={ref}
onClick={e => {
e.preventDefault();
onClick(e);
}}
>
{/* Render custom icon here */}
▼
{children}
</a>
));
render(
<Dropdown>
<Dropdown.Toggle as={CustomToggle} id="dropdown-custom-components">
Custom toggle
</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Item eventKey="1">Red</Dropdown.Item>
<Dropdown.Item eventKey="2">Blue</Dropdown.Item>
<Dropdown.Item eventKey="3" active>
Orange
</Dropdown.Item>
<Dropdown.Item eventKey="1">Red-Orange</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>,
);
Docs

You can easily add an icon to the dropdown button of react-bootstrap.
<NavDropdown title="Dropdown" id="collasible-nav-dropdown">
Change this code to the code given below:
<NavDropdown
title={
<span>
<i className='fad fa-newspaper'></i> Dropdown
</span>
}
id='collasible-nav-dropdown'>
Now your code will look like that.
<NavDropdown
title={
<span>
<i className='fad fa-newspaper'></i> Dropdown
</span>
}
id='collasible-nav-dropdown'>
<NavDropdown.Item href='#action/3.1'>Action 1</NavDropdown.Item>
<NavDropdown.Item href='#action/3.3'>Action 2</NavDropdown.Item>
</NavDropdown>
Note: The code I have shared is taken from react-bootstrap version 2.0.0.
https://react-bootstrap.github.io/components/navbar/

here's with the Icon
<DropdownButton id="example-month-input-2" title=
{this.state.weekselectedType}>
<Dropdown.Item onClick={() => this.changeWeekValue('a')}><i
class="fa fa-chevron-down"></i></Dropdown.Item>
<Dropdown.Item onClick={() =>
this.changeWeekValue('b')}>B</Dropdown.Item>
<Dropdown.Item onClick={() =>
this.changeWeekValue('c')}>C</Dropdown.Item>
</DropdownButton>
font-awesome