We Keep Coding

sidebar menu with dropdown in react js

i am trying to create a sidebar with drop down
like this example in react js
https://www.w3schools.com/howto/howto_js_dropdown_sidenav.asp
i was able to design it using react the issue is that when i click on a inner li
the dropdown closes i dont want it to close
this.state = { isOpen: false, }
Clickhandler() {
this.setState({ isOpen: !this.state.isOpen });
}
<li style={styles.listItem}
onClick={this.Clickhandler}
className={this.state.isOpen ? "admintabs" : ""}
>
<div>
<FontAwesomeIcon
icon={faHistory}
style={{ marginRight: "1rem" }}
/>
</div>
<div> Internal users</div>
<div>
{" "}
<FontAwesomeIcon icon={faCaretDown} />
</div>
</li>
{this.state.isOpen ? (
<>
<NavLink
to="/admin/saler"
activeClassName="active3"
onClick={this.Clickhandler}
>
<li style={styles.listItem}>
<div>
<FontAwesomeIcon
icon={faCube}
style={{ marginRight: "1rem" }}
/>
</div>
<div> saler</div>
</li>
</NavLink>
<NavLink
to="/admin/con"
activeClassName="active3"
onClick={this.Clickhandler}
>
<li style={styles.listItem}>
<div>
<FontAwesomeIcon
icon={faBriefcaseMedical}
style={{ marginRight: "1rem" }}
/>
</div>
<div> Con</div>
</li>
</NavLink>
</>
) : null}
my code is too big so i added in codesand box
https://codesandbox.io/s/stupefied-hooks-9qm66s?file=/src/App.js

Ant Design modal appears few times in react js

Ant modal appears few times, but if i remove map function inside the modal then its works fine its appears only one time.
what may be the issue? please help me to solve this issue (Modal triggering/appears few times)
Ant modal code follows:
const [visibleVoucherModal, setVisibleVoucherModal] = useState(false);
const showVoucherModal = () => {
setVisibleVoucherModal(true)
}
const closeVoucherModal = () => {
setVisibleVoucherModal(false);
};
const SavedVoucherModal = () => {
return (
<Modal title="Select Any Voucher" visible={visibleVoucherModal} onCancel={closeVoucherModal} footer={null} >
{savedVoucherList.length >= 1 ?
<div>
<Checkbox.Group className="w-100" onChange={checkBox} value={voucherVal} >
{savedVoucherList.map((item, i) => {
return (
<div key={i}>
<Checkbox value={item.Id} className="w-100" onChange={e => { handleCheckBox(e, i) }}
checked={checked[i] || true} disabled={!checked[i] && disabled} >
<div className="pl-4">
<List.Item style={{ marginTop: "-35px" }} className="py-0">
<List.Item.Meta
// avatar={<img src={item.Photo == '' ? 'd' : item.Photo} alt="" width="72" />}
title={<span style={{ fontSize: "12px" }}>{item.Name}</span>}
description={<div className="small">Expiry Date: <br />{item.ExpireDate.slice(0, 10)}</div>}
/>
<div className="pt-1">
<p className="font-weight-bold text-primary mb-0">{numberFormat(item.Price)}</p>
<small><del>{numberFormat(item.OldPrice)}</del></small>
</div>
</List.Item>
</div>
</Checkbox>
<Divider className="m-0 p-0 mb-4" />
</div>)
})}
</Checkbox.Group>
</div> :
<p className="mb-4">Oops, there is no voucher applicable to this order</p>
}
<Button type="primary" className="font-weight-bold btn-round" onClick={closeVoucherModal}>Close</Button>
</Modal>
)
}
Button:
<Button type="default" className="text-primary border-right-0 border-left-0" size="large" onClick={showVoucherModal}>Redeem Voucher</Button>

react-router-dom 'Link' is not working just for one part of code and working perfectly fine elsewhere. What's the problem?

Here I'm fetching the data from the API and storing it into state to show it on screen. Here is details.js
<div className="h2 mt-4">More Like This</div>
<div class="container-fluid overflow-auto">
<div class="row flex-row flex-nowrap">
{SimilarMovies && SimilarMovies.map((similarmovie, index) => (
<React.Fragment key={index}>
<GridCard
image={similarmovie.poster_path && `${IMAGE_URL}w500${similarmovie.poster_path}`}
similarMovieId={similarmovie.id} movieTitle={similarmovie.title} name={similarmovie.original_title}
/> {/*this will go to else part of gridcard */}
</React.Fragment>
))}
</div>
</div>
{/* actor button */}
<div className="text-center mt-2">
<button className="btn btn-primary" onClick={handleClick}> View Actors</button>
</div>
{/* actors grid */}
{ActorToggle &&
<Row>
{Crews && Crews.map((crew, index) => (
<React.Fragment key={index}>
{crew.profile_path &&
<GridCard
actor={crew.name} character={crew.character} image={`${IMAGE_URL}original${crew.profile_path}`}
/>}
</React.Fragment>
))}
</Row>}
in this code <Gridcard> which appears first is having problem, data displayed Link is not working but it changes in url so if I refresh the page, I'll go to that page. The another <Gridcard> below is working fine.
here is Gridcard.js
import React from 'react';
import { Link } from 'react-router-dom';
import { Col } from 'reactstrap';
function GridCard(props) {
if(props.actor) {
return(
<Col lg={3} md={4} sm={6} xs={6} className="mb-3 mt-3">
<div>
<img className="card card-img border-0" style={{ width: '100%', height: '300px' }} alt="img" src={props.image} />
<div className="text-center text-dark font-weight-bold card-footer">
<div>{props.actor} as {props.character}</div>
</div>
</div>
</Col>
)
}
else if(props.movieId) {
return(
<Col lg={3} md={4} sm={6} xs={6} className="mb-3">
<div>
<Link to={`/movie/${props.movieId}`} className="text-decoration-none">
<img className="card border-0" style={{ width: '100%', height: '330px' }} alt="img" src={props.image} />
</Link>
</div>
</Col>
)
}
else {
return(
<Col lg={3} md={4} sm={6} xs={6} className="mb-3">
<div>
<Link to={`/movie/${props.similarMovieId}`} className="text-decoration-none">
<img className="card border-0" style={{ width: '100%', height: '330px' }} alt="img" src={props.image} />
</Link> {/*this one is not working*/}
</div>
</Col>
)
}
}
export default GridCard;
here is my Main.js in case you need it
const LoginContainer = () => (
<div>
<Route path="/login" component={Signin} />
</div>
);
const SignupContainer = () => (
<div>
<Route path="/signup" component={Signup} />
</div>
);
const DefaultContainer = () => (
<div>
<Header />
<Switch>
<Route exact path='/' component={Home} />
<SecuredRoute path='/profile' component={Profile} />
<SecuredRoute exact path='/movie/:Id' component={MovieDetail} />
<SecuredRoute path='/movies' component={LandingPage} />
<Route path='/search' component={SearchBox} />
<SecuredRoute path='/tv/:Id' component={TvDetail} />
<SecuredRoute path='/tv' component={TvLandingPage} />
<Redirect to={Home} />
</Switch>
</div>
);
class Main extends Component {
render() {
return(
<div>
<Switch>
<Route exact path="/login" component={LoginContainer}/>
<Route exact path="/signup" component={SignupContainer}/>
<Route component={DefaultContainer}/>
</Switch>
<Footer />
</div>
);
}
}
export default Main;

Handling onClick for a particular element in react

I am trying to make a card grid where the user can expand the card to view its details. The issue I am facing with the react hooks is that the function is getting called for all cards instead of the particular card I am clicking the button. As a result, all the cards are getting expanded.
Here's my code for reference.
Any help is highly appreciated. Thank you!
function Album(props) {
return (
<div>
<Card className={classes.card}>
<Card.Text >
<p className={classes.heading}>
{props.blogTitle}
</p>
</Card.Text>
<Card.Body>
<Card.Img
src={props.imgsrc}
alt="Card image"
className={classes.cardMedia}
/>
{props.cardOpen &&
<AnimatePresence>
<motion.div
initial={{opacity:0}}
animate={{opacity:1, transition:0.3}}
>
<p className={classes.desc} gutterbottom>
{props.blogDescription}
</p>
<div href={props.blogLink}
style={{color:"gray", fontSize:17, fontFamily:"calibri", fontSmooth: "auto", cursor:"pointer", display:"flex", justifyContent:"center"}}>
<LocalLibraryIcon style={{marginRight:7}}/>Read blog
</div>
</motion.div>
</AnimatePresence>
}
{(props.cardOpen) ?
<div onClick={props.isOpen} style={{float:"right", cursor:"pointer"}}>
<ExpandLessIcon style={{fontSize:40, marginTop:10, color:" #909090"}}/>
</div> : (
<div onClick={props.isOpen} style={{float:"right", cursor:"pointer"}}>
<ExpandMoreIcon style={{fontSize:40, marginTop:10, color:" #909090"}}/>
</div>
)}
</Card.Body>
</Card>
</div>
);
}
export default function ProjectItems() {
const [cardOpen, setCardOpen]= useState(false);
return (
<React.Fragment>
<CssBaseline />
<main>
<div className={classes.heroContent}>
<Container maxWidth="md">
<Typography
variant="h2"
align="center"
color="textPrimary"
className={classes.root}
gutterBottom
>
Blogs
</Typography>
</Container>
</div>
<Container maxWidth="md">
<Grid container spacing={4}>
{blogData.map(post => (
<Grid item xs={12} sm={6} md={4} key={post.id}>
<div>
<Album
blogId={post.id}
blogTitle={post.title}
blogDescription={post.summary}
imgsrc={post.image_link}
blogLink={post.article_link}
isOpen={()=>{
setCardOpen(!cardOpen);
}}
cardOpen={cardOpen}
/>
</div>
</Grid>
))}
</Grid>
</Container>
</main>
</React.Fragment>
);
}

How can i set display flex in my react slider?

This is my slider
<Slider {...settings}>
<div style={{ 'display': 'flex !important' }}>
<ArrowsToolComponent key={name} color={color} />
<ZoomTool key={name} color={color} />
</div>
<div>
<GridToolComponent key={name} color={color} />
<CropToolComponent disabled={disabled} key={name} color={color} />
</div>
<div>
<FlipTool disabled={disabled} key={name} color={color} />
<PriorityToolComponent disabled={disabled} key={name} color={color} />
</div>
<div>
<CopyFileToolComponent disabled={false} key={name} color={color} />
<CancelFileToolComponent disabled={disabled} key={name} color={color} />
</div>
<div>
<InsertTextBox key={name} color={color} />
<InsertImageBox key={name} color={color} />
</div>
</Slider>
How can i set display: flex to the div in my slider? There is no info in react-slick docs about it. It`s always inline-block by default.

When writing components using React, we can accept different props other than the required ones, and deconstruct them in our component. It seems that from this library does support passing style props.
If there is no default props, you would be able to use the React style property, e.g:
<Slider {...settings} style={{ display: 'flex' }}>
{ /* rest of the code */}
</Slider>
If the component has defaultProps, React renders the component using them, unless the parent overrides it. So you can also create a Parent <div> with your required styles, which could be:
<div style={{ display: 'flex' }}>
<Slider {...settings}>
{ /* rest of the code */}
</Slider>
</div>
React.js Docs about Rendering elements.

<Slider {...settings} style={{ display: "flex" }}>