I have a Suggest component that is rendered out like this:
<div class="bp4-popover-content">
<div>
<ul class="b4-menu">
<li>
<a>
<div class="bp4-fill bp4-text-overflow-ellipsis">
<div>Some text</div>
</div>
</a>
</li>
</ul>
</div>
</div>
By default, it uses text-overflow ellipsis, but i want to switch it to bp4-text-overflow-wrap. How can I achieve this in React? What I have so far:
const ItemSelect = Suggest.ofType<Items>();
<ItemSelect
fill
items={newUserItems}
itemListPredicate={filterItems}
itemRenderer={renderItem}
noResults={<MenuItem disabled={true} text="No results." />}
onItemSelect={(item, event) => {
setQuery(item.name);
item.isNew = false;
onItemSelect(item);
}}
popoverProps={{
minimal: true,
popoverClassName: `custom-class ${
isOpenLine ? "open-line-popover" : "non-open-line-popover"
}`,
}}
inputValueRenderer={() => query}
resetOnSelect={true}
resetOnQuery={true}
onQueryChange={(q, event) => {
if (event === undefined) {
setQuery(q);
}
}}
query={query}
inputProps={{ inputRef: inputRef }}
/>
Related
I have MUI radio buttons which I use to get filter criteria and I filter an object. Then i render the filtered object in an owl carousal to show. But when I click on a radio button it always takes the previously clicked value of the radio button. I have used ternary conditions to check but it keeps happening I couldb't figure out following is my code.
<FormControl>
<RadioGroup
row
aria-labelledby="demo-row-radio-buttons-group-label"
name="row-radio-buttons-group"
value={movieType}
onChange={movieTypeChange}
>
<FormControlLabel
value="1"
control={<Radio color="error" />}
label="All"
/>
<FormControlLabel
value="2"
control={<Radio color="error" />}
label="Now Showing"
/>
<FormControlLabel
value="3"
control={<Radio color="error" />}
label="Upcoming"
/>
</RadioGroup>
</FormControl>
{filterdMovie.length > 0 ? (
<OwlCarousel
className="owl-theme"
loop={movieCount}
center={movieCount}
margin={1}
autoplay={true}
dots={false}
items={3}
touchDrag={true}
lazyLoad={true}
responsive={state.responsive}
// responsive={"0:{items:1,},600:{items:3,},1000:{items:5,}"}
animateOut={"fadeOut"}
>
{filterdMovie.map((movieBannertop, idx) => {
return (
<div key={idx}>
<div className="item">
<div className="prs_upcom_movie_box_wrapper">
<div className="prs_upcom_movie_img_box">
<img
src={
movieBannertop.thumbnail
// HTMLImageElement.complete
// ?
// `${process.env.REACT_APP_DEV_BASE_URL_IMAGE}/movie/${movieBannertop.id}/thumbnail.jpg`
// : placeholder
}
alt="movie_img"
/>
<div className="prs_upcom_movie_img_overlay"></div>
<div className="prs_upcom_movie_img_btn_wrapper">
<ul>
<li>
{movieBannertop.bookingOpen ? (
<a
href
onClick={() => viewMovie(movieBannertop)}
style={{ textDecoration: "none" }}
>
More Info
</a>
) : null}
</li>
<li>
{!movieBannertop.upcoming ? (
<a
href
onClick={() => viewMovie(movieBannertop)}
style={{ textDecoration: "none" }}
>
Now Showing
</a>
) : (
<a
href
style={{
textDecoration: "none",
backgroundColor: "#2488ed",
}}
onClick={() => viewMovie(movieBannertop)}
>
Coming Soon
</a>
)}
</li>
</ul>
</div>
</div>
<div className="prs_upcom_movie_content_box">
<div className="prs_upcom_movie_content_box_inner">
<Tooltip title={movieBannertop.name}>
<h2>
<a
href
onClick={() => viewMovie(movieBannertop)}
style={{ textDecoration: "none" }}
>
{" "}
{movieBannertop.name.length > 10
? `${movieBannertop.name.substring(0, 10)}...`
: movieBannertop.name}
</a>
</h2>
</Tooltip>
<p>{movieBannertop.genre}</p>
</div>
<div className="prs_upcom_movie_content_box_inner_icon">
{/* <ul>
<li>
<a href="movie_booking.html">
<i className="flaticon-cart-of-ecommerce"></i>
</a>
</li>
</ul> */}
</div>
</div>
</div>
</div>
</div>
);
})}
</OwlCarousel>
) : (
<>
<Stack
direction="column"
justifyContent="center"
alignItems="center"
>
<img src={notFound} alt="" width="50%" />
<h4>No Movies Found</h4>
</Stack>
</>
)}
const movieTypeChange = (e) => {
e.preventDefault();
setMovieType(e.target.value);
const value = e.target.value;
if (value === "1") {
setFileredMovies(onlineMovies);
}
if (value === "2") {
let shows = [];
onlineMovies.forEach((element) => {
if (!element.upcoming) {
shows.push(element);
}
});
setFileredMovies(shows);
console.log(shows);
}
if (value === "3") {
console.log("3");
let shows = [];
onlineMovies.forEach((element) => {
if (element.upcoming) {
shows.push(element);
}
});
setFileredMovies(shows);
}
};
const movieTypeChange = (e) => {
var shows = [];
const value = e.target.value;
if (value === "1") {
setFileredMovies(onlineMovies);
}
if (value === "2") {
onlineMovies.forEach((element) => {
if (!element.upcoming) {
shows.push(element);
}
});
setFileredMovies(shows);
}
if (value === "3") {
onlineMovies.forEach((element) => {
if (element.upcoming) {
shows.push(element);
}
});
setFileredMovies(shows);
}
setMovieType(value);
};
I want to find a div that has been rendered by react-date-range which has a className of rdrDateRangePickerWrapper and add another class to it. but currently, it's not working, is there any other way to do this?
this is the part of the code,
<div>
<i
role="button"
className="far fa-calendar-alt"
onClick={() => {
!openDistributionDatepicker && setOpenIngestDatepicker((prev) => !prev);
document
.getElementsByClassName("rdrDateRangePickerWrapper")
.classList.add(" another-class");
}}
/>
{openIngestDatepicker && (
<div className="z-intex999">
<DateRangePicker
onChange={(item) => setIngestDate([item.selection])}
showSelectionPreview={true}
moveRangeOnFirstSelection={false}
months={2}
ranges={ingestDate}
direction="horizontal"
/>
</div>
)}
</div>
Try below code:
document.querySelectorAll(".rdrDateRangePickerWrapper")
.forEach(element => element.classList.add('another-class'));
I am just a beginner at learning React! (3 weeks). I cloned the Instagram main page for practicing and I tried to make a comment component and apply the Array.map() method to the comment data stored in the parent's state so that as many comment components as the number of comments appear. When I do this without comment component it works well
<ul className="feed-comments">
{/* <Comment commentAddList={this.states.commentList} /> */}
<li>hello</li>
{this.state.commentList.map((comm, idx) => {
return <li key={idx}>{comm}</li>;
})}
</ul>
However, when I create Comment Component and passing parent's state to child's component in Comment.js it doesn' work
and the error message : Cannot read properties of undefined (reading 'commentList')
<ul className="feed-comments">
<Comment commentAddList={this.states.commentList} />
</ul>
This is Comment.js in Component folder
import React, { Component } from 'react';
export class Comment extends Component {
render() {
return (
<>
{/* <li>hello</li> */}
{this.props.commentAddList.map((comm, idx) => {
return <li key={idx}>{comm}</li>;
})}
</>
);
}
}
export default Comment;
I will leave the whole code below just in case!
import React, { Component } from 'react';
// import "../../styles/common.scss";
import './Feed.scss';
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome';
import {
faHeart,
faComment,
faPaperPlane,
faBookmark,
faEllipsisH,
} from '#fortawesome/free-solid-svg-icons';
import Comment from '../../../compoonents/Comment/Comment';
class Feed extends Component {
constructor() {
super();
this.state = {
value: '',
commentList: [],
};
}
getValue = event => {
this.setState({
value: event.target.value,
});
};
addComment = () => {
this.setState({
commentList: this.state.commentList.concat([this.state.value]),
value: '',
});
};
addCommEnter = e => {
if (e.key === 'Enter') {
this.addComment();
}
};
// enterClick = e => {
// if (e.key === 'Enter') {
// this.buttonClick;
// e.target.value = '';
// }
// };
render() {
return (
<div className="feeds">
<div className="article">
<div className="identi">
<img className="selfi-identi" alt="selfi-img" src="about.png" />
<span className="name"> Jiwan Jeon </span>
{/* <i id="test" class="fa fa-ellipsis-h" aria-hidden="true"></i> */}
<div className="faEllipsisH">
<FontAwesomeIcon icon={faEllipsisH} />
</div>
</div>
<div className="pic">
<img id="feed-pic" src="ucscPic.png" />
</div>
<div className="show-box">
<div className="reaction-icons">
<FontAwesomeIcon icon={faHeart} className="heart" />
<FontAwesomeIcon icon={faComment} className="comment" />
<FontAwesomeIcon icon={faPaperPlane} className="plane" />
<FontAwesomeIcon icon={faBookmark} className="bookMark" />
</div>
<div className="like-counts">
<span>like 4,000</span>
</div>
<div className="check-comments">
<span>
UC Santa Cruz will continue to offer most courses remotely or
online for spring and summer 2021, providing in-person
instruction for a small
</span>
<a id="space" href="">
expanding
</a>
<br />
Check the all comments
<ul className="feed-comments">
<Comment commentAddList={this.states.commentList} />
{/* <li>hello</li> */}
{/* {this.state.commentList.map((comm, idx) => {
return <li key={idx}>{comm}</li>;
})} */}
</ul>
</div>
</div>
<div className="comment">
<i className="fa fa-smile-o" />
<input
// onChange={this.textChange}
// onKeyPress={this.enterClick}
onKeyPress={this.addCommEnter}
onChange={this.getValue}
className="user-input"
type="text"
placeholder="Add Comment..."
/>
<button onClick={this.addComment} className="post">
Post
</button>
</div>
</div>
</div>
);
}
}
export default Feed;
It would really appreciate your comment!
I only glanced at this question so I don't know if this is the only problem, but:
<ul className="feed-comments">
<Comment commentAddList={this.states.commentList} />
</ul>
needs to be:
<ul className="feed-comments">
<Comment commentAddList={this.state.commentList} />
</ul>
I am trying to make my some of my tab disable when editable is set to false:
Here is my following code:
const tabs = [
"Mission",
"Agreement",
"Calendar",
"Managers",
"Members",
"Invitees",
"Applicants",
];
<div className="team-management">
<div className="team-management-tabs-header">
<div className="team-management-tab-items">
{tabs.map((tab, index) => (
<div
className={
activeTab === index
? "team-management-tab-item selected"
: "team-management-tab-item"
}
key={tab}
role="button"
tabIndex={tab}
onKeyPress={() => {
return;
}}
onClick={() => setActiveTab(index)}
>
<span className="tab-item-text">{tab}</span>
<span className="tab-item-indicator" />
</div>
))}
</div>
</div>
<div className="team-management-tab-panes">
{tabs[activeTab] === "Mission" && (
<Mission
editable={editable}
teamId={teamId}
teamData={teamData}
fetchTeamData={fetchTeamData}
/>
)}
...
</div>
Here is how my page look like:
How can I add disabled to my div in this situation?
thank you for helping.
If editable was a state then you can conditionally choose to fire the setActiveTab() function (considering that is the function that enables your tab and you want it disabled ) based on the state of editable.
onClick={() => if(editable)setActiveTab(index)}
I have a button in each of the 3 panels. I am looking at a dropdown message in that one panel where I clicked the button. But currently, when I click on one of the buttons, all 3 panels will show the dropdown message. I read about making use of indexing but I am not exactly sure how to add it in. How can I go about solving this?
export default class CustomerDetails extends Component {
constructor(props) {
super(props);
this.state = {
listOpen: false,
};
}
// Toggle the dropdown menu
toggleList(name) {
this.setState(prevState => ({
listOpen: !prevState.listOpen
}))
}
render() {
const { listOpen } = this.state
if (!this.state.customerDetails)
return (<p>Loading Data</p>)
return (<div className="customerdetails">
<div className="addmargin">
<div className="col-md-9">
{this.state.customerDetails.data.map(customer => (
<Panel bsStyle="info" key={customer.name}>
<Panel.Heading>
<Panel.Title componentClass="h3">{customer.name}</Panel.Title>
</Panel.Heading>
<Panel.Body>
<img src={require(`./sampleimages/${customer.image}.jpg`)} className="Customer-image" alt="image" />
<br line-height="110%"></br>
<p align="left">{customer.desc}</p>
{/* Toggle dropdown menu */}
<div className="image-cropper">
<button><img src={arrow} className="arrow-button" onClick={() => this.toggleList(customer.name)} /></button>
{listOpen && <ul className="dd-list">
<li class="dropdown" className="dd-list-item" key={customer.name}>{customer.tip1}</li>
</ul>}
</div>
You can do it like this. In your state declare a variable which points to index of the panel you want to show as:
this.state = {
listOpen: 0,
};
Then modify your toogleList method as:
toggleList(index){
this.setState({ listOpen: index })
}
And finally, change your JSX as:
{this.state.customerDetails.data.map((customer, index) => (
<Panel bsStyle="info" key={customer.name}>
<Panel.Heading>
<Panel.Title componentClass="h3">{customer.name}</Panel.Title>
</Panel.Heading>
<Panel.Body>
<img src={require(`./sampleimages/${customer.image}.jpg`)} className="Customer-image" alt="image" />
<br line-height="110%"></br>
<p align="left">{customer.desc}</p>
{/* Toggle dropdown menu */}
<div className="image-cropper">
<button><img src={arrow} className="arrow-button" onClick={() => this.toggleList(index)} /></button>
{listOpen === index && <ul className="dd-list">
<li class="dropdown" className="dd-list-item" key={customer.name}>{customer.tip1}</li>
</ul>}
</div>
</PanelBody>
<Panel>
}
Hope this works for you.
// Toggle the dropdown menu
toggleList(index) {
let customerDetails = this.state.customerDetails
if (customerDetails.data[index].listOpen)
customerDetails.data[index].listOpen = false
else
customerDetails.data[index].listOpen = true
this.setState({ customerDetails })
}
change this function like this
{
this.state.customerDetails.data.map((customer, index) => (
<Panel bsStyle="info" key={customer.name}>
<Panel.Heading>
<Panel.Title componentClass="h3">{customer.name}</Panel.Title>
</Panel.Heading>
<Panel.Body>
<img src={require(`./sampleimages/${customer.image}.jpg`)} className="Customer-image" alt="image" />
<br line-height="110%"></br>
<p align="left">{customer.desc}</p>
{/* Toggle dropdown menu */}
<div className="image-cropper">
<button><img src={arrow} className="arrow-button" onClick={() => this.toggleList(index)} /></button>
{customer.listOpen && <ul className="dd-list">
<li class="dropdown" className="dd-list-item" key={customer.name}>{customer.tip1}</li>
</ul>}
</div>