MaterialUI two IconButtons in GridListTile - javascript

I have the following GridListTile and want to add a second button but it is not working.
I have tried adding two ActionIcons but only one of them is displaying?
<GridListTile key={tile.img}>
<img src={tile.img} alt={tile.title} />
<GridListTileBar
title={tile.title}
classes={{
root: classes.titleBar,
title: classes.title,
}}
actionIcon={
<a href={tile.link} target="_blank">
<IconButton aria-label={`star ${tile.title}`}>
<PlayCircleOutlineIcon
className={classes.title}
/>
</IconButton>
</a>
}
actionIcon={
<a href={tile.link} target="_blank">
<IconButton aria-label={`star ${tile.title}`}>
<PlayCircleOutlineIcon
className={classes.title}
/>
</IconButton>
</a>
}
/>
</GridListTile>
Any ideas?

Would this work?
<GridListTile key={tile.img}>
<img src={tile.img} alt={tile.title} />
<GridListTileBar
title={tile.title}
classes={{
root: classes.titleBar,
title: classes.title,
}}
actionIcon={
<>
<a href={tile.link} target="_blank">
<IconButton aria-label={`star ${tile.title}`}>
<PlayCircleOutlineIcon className={classes.title} />
</IconButton>
</a>
<a href={tile.link} target="_blank">
<IconButton aria-label={`star ${tile.title}`}>
<PlayCircleOutlineIcon className={classes.title} />
</IconButton>
</a>
</>
}
/>
</GridListTile>

Related

I am found 'subject' is of type 'unknown'. error during the npm start but code is run and working how to resolved it?

Object.entries(APIData).map(([key, subject], i) => {
return (
<div className="id-result" key={i}>
<div id="heading-result">
<h2 key={i} className="heder-result">{subject.title}</h2>
{/* <img id="pdficon" src={pdficon} alt="download pdf" height="20px" /> */}
<Button className="download-button"><PDFReader /></Button>
</div>
<hr className="hr-result" />
{/* <p className="para-result" key={i}>{subject.para}</p> */}
<p dangerouslySetInnerHTML={{ __html: subject.para }}>
</p>
</div>
)
I am facing error on subject that 'subject' is of type 'unknown'.

Stick a Material UI Input when scrolling

I want to make the Material UI Input stick at the top when scrolling, I have a modal an its content is the search input and the results.
I used overflow-y: scroll; in <div className="modal-content"> and used position: sticky; in <OutlinedInput className="SearchInput" /> but then the search and the results scroll together which I don't want it to, I want only the result to scroll.
Then I removed the overflow-y: scroll; from in <div className="modal-content"> and put it in <div className="card" key={post._id}> but then the results went outside the modal borders as in the Image down below
The Code:
return (
<>
<button onClick={toggleModal} className="btn-modal">
<SearchIcon />
</button>
{modal && (
<div className="modal">
<div onClick={toggleModal} className="overlay"></div>
<div className="modal-content">
<div className="searchBar">
<div style={{ padding: 20 }}>
<div font-size="20px" className="searchTry">Search</div>
<OutlinedInput
className="SearchInput"
placeholder='Search...'
onChange={(e) => searchItems(e.target.value)}
endAdornment={
<InputAdornment>
<SearchIcon />
</InputAdornment>
}
/>
<div style={{ marginTop: 20 }}>
{searchInput.length > 0 ? (
filteredResults.map((post) => {
return (
<div className="card" key={post._id}>
<div className="card-content">
<Link to={`/post/${post._id}`} className="link">
<h2 className="results-title">
{post.title}
</h2>
<ol className="card-username">
{post.username}
</ol>
</Link>
</div>
</div>
)
})
) : (
APIData.map((post) => {
return (
<div className="card" key={post._id}>
<div className="card-content">
<Link to={`/post/${post._id}`} className="link">
<h2 className="card-name">
{post.title}
</h2>
<ol className="card-username">
{post.username}
</ol>
</Link>
</div>
</div>
)
})
)}
</div>
</div>
</div>
<button className="close-modal" onClick={toggleModal}>
<CloseIcon />
</button>
</div>
</div>
)}
</>
);

How to add active class on div on link click inside of div

I want to add active class to the parent element of the div, but the problem is this code is adding on double click not on single click, how to fix this.
The below code is for the sidebar which I want to show on my website, everything is fine but the problem is the handleActiveClass function is not working on single click.
import React from 'react';
import { Link } from 'react-router-dom';
import './Sidebar.css';
const Sidebar = ({ sidebarOpen, closeSidebar, handleLogout }) => {
let logoUrl = JSON.parse(localStorage.getItem('app_icon'));
const handleActiveClass = (e) => {
e.target.parentElement.classList.toggle('active_menu_link');
};
return (
<div id='sidebar' className={sidebarOpen ? 'sidebar-responsive' : ''}>
<div className='sidebar_title'>
<div className='sidebar_img'>
<img src={`https://stucharge.bakersbrisk.com${logoUrl}`} alt='logo' />
<h1>Admin Panel</h1>
</div>
<i className='fa fa-times' id='sidebaricon' onClick={closeSidebar}></i>
</div>
<div className='sidebar_menu'>
<div className='sidebar_link ' onClick={(e) => handleActiveClass(e)}>
<i className='fa fa-home'></i>
<Link to='/home'>Dashboard</Link>
</div>
<h2>MNG</h2>
<div className='sidebar_link ' onClick={(e) => handleActiveClass(e)}>
<i className='fas fa-user-circle'></i>
<Link to='/profile'>Profile </Link>
</div>
<div className='sidebar_link ' onClick={(e) => handleActiveClass(e)}>
<i className='fas fa-book'></i>
<Link to='/subjects'>Subjects </Link>
</div>
<div className='sidebar_link ' onClick={(e) => handleActiveClass(e)}>
<i className='fa fa-graduation-cap'></i>
<Link to='/courses'>Courses</Link>
</div>
<div className='sidebar_link ' onClick={(e) => handleActiveClass(e)}>
<i className='fas fa-book-open'></i>
<Link to='/notes'>Notes</Link>
</div>
<div className='sidebar_link ' onClick={(e) => handleActiveClass(e)}>
<i className='fas fa-chalkboard-teacher'></i>
<Link to='/class'>Online Class</Link>
</div>
<div className='sidebar_link ' onClick={(e) => handleActiveClass(e)}>
<i className='fa fa-handshake-o'></i>
<Link to='/contact'>Contact Developer</Link>
</div>
<h2>LEAVE</h2>
<div className='sidebar_logout'>
<i className='fa fa-power-off'></i>
<Link to='/' onClick={handleLogout}>
Log out
</Link>
</div>
<div
className='dev'
style={{ position: 'absolute', bottom: '20px', left: '8px' }}
>
<h3 style={{ color: '#51c4d3' }}>
Developed by{' '}
<i
className='far fa-thumbs-up'
style={{ fontSize: '1.6rem', marginLeft: '4px' }}
></i>
</h3>
<h2 style={{ color: '#b0efeb' }}>Codeven Solution</h2>
</div>
</div>
</div>
);
};
export default Sidebar;
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
This code might not run here, but you can understand it as i have pasted the whole code.

dispatchConfig: {…}, _targetInst: FiberNode, _dispatchInstances ReactJS error

Hello ,
I was trying to code basket functions on react(onAdd func). But I encountered such a problem. Could you please tell me why? i have no idea about it .
You can see problem from here
I tried to add the add-to-cart function to my button, but I am facing such a problem, could you please tell me why?
import { Row, Col, Form, Button, Label, Input } from "reactstrap";
import Link from "next/link";
import items from "../data/products-cart.json";
import SelectBox from "./SelectBox";
import Stars from "./Stars";
import { useState } from "react";
export default function DetailMain({product}) {
const[CartItems,setCartItems]=useState(items);
console.log(CartItems);
const onAdd=(product)=>{
const exists=CartItems.find(x=>x.id === product.id);
if(exists){
setCartItems(
CartItems.map((x)=>
x.id===product.id ?{...exists,items: exists.items+1}:x
)
);
} else{
setCartItems([...CartItems,{...product,items:1}]);
}
};
console.log(product);
return (
<>
<h1 className="mb-4">{product.name}</h1>
<div className="d-flex flex-column flex-sm-row align-items-sm-center justify-content-sm-between mb-4">
<ul className="list-inline mb-2 mb-sm-0">
<li className="list-inline-item h4 font-weight-light mb-0">
${product.price.toFixed(2)}
</li>
<li className="list-inline-item text-muted font-weight-light">
<del>${product.priceBefore.toFixed(2)}</del>
</li>
</ul>
<div className="d-flex align-items-center">
<Stars
stars={4}
secondColor="gray-300"
starClass="mr-1"
className="mr-2"
/>
<span className="text-muted text-uppercase text-sm mt-1">
{product.reviewscount} reviews
</span>
</div>
</div>
<p className="mb-4 text-muted">{product.description.short}</p>
<Form>
<Row>
<Col sm="6" lg="12" xl="6" className="detail-option mb-4">
<h6 className="detail-option-heading">
Size <span>(required)</span>
</h6>
<SelectBox options={product.sizes} />
</Col>
<Col sm="6" lg="12" xl="6" className="detail-option mb-4">
<h6 className="detail-option-heading">
Type <span>(required)</span>
</h6>
{product.types.map((type) => (
<Label
key={type.value}
className="btn btn-sm btn-outline-secondary detail-option-btn-label mr-2"
tag="label"
for={type.id}
>
{" "}
{type.label}
<Input
className="input-invisible"
type="radio"
name="material"
value={type.value}
id={type.id}
required
/>
</Label>
))}
</Col>
<Col xs="12" lg="6" className="detail-option mb-5">
<label className="detail-option-heading font-weight-bold">
Items <span>(required)</span>
</label>
<input
className="form-control detail-quantity"
name="items"
type="number"
defaultValue={1}
/>
</Col>
</Row>
<ul className="list-inline mb-5">
<li className="list-inline-item">
<Button onClick={onAdd} color="dark" size="lg" className="mb-1" type="submit">
<i className="fa fa-shopping-cart mr-2" />
Add to Cart
</Button>
</li>
<li className="list-inline-item">
<Button color="outline-secondary" className="mb-1" href="#">
<i className="far fa-heart mr-2" />
Add to wishlist
</Button>
</li>
</ul>
<ul className="list-unstyled">
<li>
<strong>Category: </strong>
<a className="text-muted" href="#">
{product.category}
</a>
</li>
<li>
<strong>Tags: </strong>
{product.tags.map((tag, index) => (
<React.Fragment key={tag.name}>
<Link href={tag.link}>
<a className="text-muted">{tag.name}</a>
</Link>
{index < product.tags.length - 1 ? ",\u00A0" : ""}
</React.Fragment>
))}
</li>
</ul>
</Form>
</>
);
}
Your data should be in the same format as the data you rendered before.

How to use a vertical line in a react project which adjust the height dynamiclly?

I need to add a vertical line in my react project.I have used scss to create this. But I have given a fixed size there. What I need to do is adjust the height of the line when card size varies. That when I add new comments the card size get increases.But the line height remains same.How can I get the current card size?
This is how it looks like.
<Col sm={1}>
<div className="vl"></div>
</Col>
styles.scss
.vl {
border-left: 1px solid $disabled-icons-light-blue;
height: 800px;
padding-right: 0px;
}
Given below is the file where I have used the line.
<div>
<div className="icon-list">
<TicketAction icon={<ChevronLeft />} tooltip="Back" />
<TicketAction icon={<ArrowClockwise />} tooltip="Refresh" />
<TicketAction icon={<Archive />} tooltip="Archive" />
<TicketAction icon={<Share />} tooltip="E-mail" />
<TicketAction icon={<Pencil />} tooltip="Edit" />
</div>
<div>
<Card className="card">
<Row>
<Col sm={9}>
<Card.Body>
<div className="header-date text p2">
<p2>2 DAYS AGO ON TUESDAY AT 5.43 AM</p2>
</div>
<Row>
<Col sm={3} className="title">
<h2>{title}</h2>
</Col>
<Col sm={7} className="drop-down">
<PriorityBadge priority="Error" />
</Col>
<Col sm={1} style={{paddingLeft: 20}}>
<Pencil />
Edit
</Col>
</Row>
<div className="ticket-data-topic text p3">
<p3>Hello,</p3>
<div className="ticket-data-content text p4">
<p4
dangerouslySetInnerHTML={{
__html: description
}}
></p4>
</div>
<hr />
<br />
<Tabs>
<Tab eventKey={1} title="Comments">
<br />
<br />
{this.displayComments()}
<br />
<h3 className="add-comment-heading">Add Comment</h3>
<AddComment ticketID={this.state.id} />
</Tab>
<Tab
eventKey={2}
title="History"
className="nav-item nav-link active"
>
History
</Tab>
</Tabs>
</div>
</Card.Body>
</Col>
<Col sm={1}>
<div className="vl"></div>
</Col>
<Col sm={2} className="ticket-data-item-col">
<Card.Body>
<div className=" ticket-item-title text p4">
<p>Created by</p>
</div>
<h4>John Doe (john#gmail.com)</h4>
<p className="ticket-data-item">{date}</p>
<div className=" ticket-item-title text p4">
<p>Ticket ID</p>
</div>
<h4 className="ticket-data-item">{id}</h4>
<div className=" ticket-item-title text p4">
<p>Employer</p>
</div>
<h4 className="ticket-data-item">{employer}</h4>
<div className=" ticket-item-title text p4">
<p>Assigned to</p>
</div>
<h4 className="ticket-data-item">{assignee}</h4>
<div className=" ticket-item-title text p4">
<p>Status</p>
</div>
<h4 className="ticket-data-item">{status}</h4>
<div className=" ticket-item-title text p4">
<p>Priority</p>
</div>
<div className=" ticket-data-item-badge text p4">
<PriorityBadge priority={priority} />
</div>
<div className=" ticket-item-title text p4">
<p>Last Updated</p>
</div>
<h4>John Doe</h4>
<p>03/05/2020</p>
</Card.Body>
</Col>
</Row>
</Card>
</div>
</div>
Don't set any height:
Use flex or grid to set the layout and don't set
align-items: 'center'
Then you will be fine the box will grow as your content grow.
For the vertical line use a border-left or border-right, so that the vertical border will take the height of the Content

Categories