We Keep Coding

How To Disable Grid and its children in React js MUI

I Want to Disable Grid (MUI Component) (and its Children) in React js .
and also , I Want to know how to Disable any Container and it's items in React js! (No matter what kind of children it has)
ex:
<Grid
item
disabled //And any other options
xs={12}
md={6}
spacing={1}
style={{ padding: '5px' }}>
<CmpDateTimePicker
label="from"
value={this.props.from_timestamp}
onChange={(from_timestamp) =>
this.props.OnFromPeriodChanged(from_timestamp)}
dir={dir}
intl={intl}
preSelect={lastMonthDate}
/>
</Grid>
Thanks for your Help! :)

The disabled prop is not available on every MUI component, but instead you can conditionally render a component by using a simple if statement or ternary operator.
Since you give no context for the above code, I can't directly give you an example, but I can give examples for the two cases I spoke about above.
You can use an if statement like:
if(<conditional>){
return <Grid>...</Grid>
}
return <div></div>
With this code your component will only render what is in the if statement when your conditional is true.
Another way is to use a ternary:
return (
<div>
{<conditional>?<Grid>
...
</Grid>:""}
</div>
)
You can use this inside of jsx to only conditionally render a certain component.

We Can disable Element via pointer-events: none property.
js file:
<Grid
item
className={this.state.isDisabled ? "container-disabled" : "container"}
xs={12}
md={6}
spacing={1}
style={{ padding: '5px' }}>
<CmpDateTimePicker
label="from"
value={this.props.from_timestamp}
onChange={(from_timestamp) =>
this.props.OnFromPeriodChanged(from_timestamp)}
dir={dir}
intl={intl}
preSelect={lastMonthDate}
/>
</Grid>
css file:
.container-disabled{
pointer-events: none;
}
.container{
/* some styles */
}

How to add different text after the map function has rendered 3 times?

I want to add some text after the cards have rendered three times. these cards take value from a local json file using split and map. i also want to change the text every three times the component has rendered.
import React from 'react';
import data from '../data.json';
import { Card,Button } from 'react-bootstrap';
function Med() {
return (
<div>
{data.slice(0,6).map((item)=>{
return (
<div>
<Card style={{ width: '18rem' }}>
<Card.Body>
<Card.Title>{item.Name}</Card.Title>
<Card.Text>
This is the explaination of product card.
</Card.Text>
<Button variant="primary">Add to cart</Button>
</Card.Body>
</Card>
</div>
)
})}
</div>
)
}
export default Med;
This is my current output. but I want it to display some text after chris's card.

{data.slice(0,6).map((item,index)=>{//use the index to conditionally render })}
Edit #1 -
So, after reading your comment maybe this code will give you an idea
{data.slice(0, 6).map((item, index) => {
return (
<div>
{index < 3 ? <h1>First three</h1> : <h1>From Fourth</h1>
</div>
);
})}

How to get the properties when a slide is clicked in swiperjs without jquery

I am trying to get the values of a specific card when it is clicked in swiperJS but am not finding in the documentation if it is possible to do so.
Hoping to not resort to wrapping each slide in a label and input button.
My code here:
<Swiper
slidesPerView={'auto'}
spaceBetween={200}
centeredSlides={true}
pagination={{
"clickable": true
}}>
{Cards.map((card, idx) => {
return (
<div className="row" style={{ display: 'inline-block' }}>
<div className="col-12 swiper-container">
<SwiperSlide>
<Cards
number={card.number}
name={card.name}
expiry={card.expiry}
cvc={card.cvc}
// focused={focus}
/>
</SwiperSlide>
</div>
</div>
)
})}
</Swiper>
Is it possible to do so?

Looking at swiper's react source code it seems like SwiperSlide renders by default into a div node . This node can receive a onClick prop, which should execute whatever function you want. That would look something like this:
<SwiperSlide onClick={()=> console.log(card.name)}>
// ...
</SwiperSlide>
If for some reason that doesn't work either, consider adding the onClick to a div already wrapping the slide (for example div.col-12.swiper-container)

How to resize Chart.JS element in React.js?

I have a React component Webstats which returns a Doughnut chart from react-chartjs-2 library. Here is how the code looks like:
const Webstats = () => {
//code to create chart.
return <Doughnut data={pd} />;
}
I use this component inside another component called Dashboard. I want to display the chart alongside a Logout button. Both should be in the same row. I use flex property of css for this purpose.
const rowC = {
display: "flex",
flexDirection: "row"
};
const Dashboard = () => {
return (
<div style={rowC}>
<Webstats />
<Link to="/">
<div>
<button onClick={auth.logout}>Logout</button>
</div>
</Link>
</div>
);
};
export default Dashboard;
But the problem is that, chart size is too big as compared to logout button.
I want to make chart size small, around 30% of the width of <div style={rowC}>. I tried these things:
return <Doughnut data={pd} width="30%"/>;
and
return (
<div style={rowC}>
<Webstats width="30%" />
// rest of html
)
and also
return (
<div width="30%">
<Doughnut data={pd} />
</div>
);
But none of this gives me the desired result. How to I resize the chart to 30% of the width (and height auto adjusted) of the <div style={rowC}>?

The documentation for ChartJS states that you need to set maintainAspectRatio to false for it to use the width and height props that you pass into your chart.
In order for Chart.js to obey the custom size you need to set maintainAspectRatio to false.
<Doughnut
data={data}
width={"30%"}
options={{ maintainAspectRatio: false }}
/>

Wrap it in div Container and set width and height.
Ex:
<div style={{height:"60vh",position:"relative", marginBottom:"1%", padding:"1%"}}>
<Doughnut options={options} data={chartData} />
</div>

Doing the following works for me:
set height and width on the <Doughnut /> component.
Set the maintainAspectRation to false.
Here is what the outcome looks like:
<Doughnut
data={data}
height="200px"
width="200px"
options={{ maintainAspectRatio: false }}
/>

Using onclick in children

I'm recently using react-spring and it works really well but I'm having some issues when I have to apply an onClick on childs.
Here is my main structure:
<anim.button className="c"
style={{ opacity: opacity.interpolate(o => 1 - o), transform }}>
<Bar />
</anim.button>
<anim.button className="c"
style={{ opacity, transform: transform.interpolate(t => `${t}
rotateX(180deg)`) }}>
<Bar />
</anim.button>
An onClick on the anim.button would work perfectly fine of course, but that's not what I'm trying.
Here is my <Bar /> component:
const Bar = () => (
<div className="bar">
<Checkbox
onClick={() => {
set(state => !state)
}}
/>
</div>
)
I also tried using the <anim.div> instead of an <anim.button> but this gives me the same results.
Now the problem here is that it seems like react-spring puts a layer onto my <Bar /> component. Is there a way to use the onClick in my component instead of the one that is used onto anim.button?

Given that Checkbox is also a component and it might not have onClick handled try putting onClick on the wrapping div or inspect the Checkbox component.

Haven't used react-spring ever but structuring your Bar component like this may do the trick.
const Bar = (props) => (
<div onClick={() => {set(state => !state)}}>
<anim.button {...props}>
<div className="bar">
<Checkbox />
</div>
</anim.button>
</div>)
then rendering it like this:
<Bar className={'c'} style={{ opacity: opacity.interpolate(o => 1 - o), transform}}/>
<Bar className="c" style={{ opacity, transform: transform.interpolate(t => `${t}
rotateX(180deg)`) }}/>

You could rather wrap the Bar in a div: <animated.div> you are wrapping a button around a checkbox which is not great. onClick will trigger as expected.
<animated.div className="c"
style={{ opacity, transform: transform.interpolate(t => `${t}
rotateX(180deg)`) }}>
<Bar />
</animated.div>

Issue has been found and didn't actually has anything to do with react-spring.
The position absolute styling was causing this.