I have the following piece of code for my component. The desired behaviour for the button is to change the className for each li, but this is not working.
const Booking = (props) => {
let { hidden } = useContext(ContextBooking)
let completed = props.completed
return (
<li
className={ //should change according to the button click below
completed && hidden ?
'booking-complete hide'
: completed ?
'booking-complete'
:
'bookings'
}}
key={props.id}
id={props.id}
>
<h3>{props.date}</h3>
<h4>{props.time}</h4>
<h5>{props.name}</h5>
</li>
)
}
{!completed && (
<button
onClick={() => {
if (!completed && !hidden) {
completed = !completed //does make it false
hidden = !hidden //does make it false
} //above works, but won't change classname for each 'li'
else if (completed && hidden) {
completed = !completed
hidden = !hidden
}
}}>
Complete
</button>
)}
In another component, I am creating multiple of these 'Booking' components, by filling in the details with info that come from a json file
const DisplayBookings = () => {
const display = (day) => allBookings.map(item => //allBookings is a json file
item.day === day &&
<Booking
completed={item.completed}
key={item.id}
id={item.id}
time={item.time}
name={item.name}
date={item.date}
/>
)
I emphasised json file as I believe it could be the source of the problem?
A component can in most cases not update its own props, and doing so even if possible is an antipattern.
You can instead use state for updating the components state.
You can create hooks for setting state like this:
const [isCompleted, setIsCompleted] = useState(props.completed);
const [isHidden, setIsHidden] = useState(hidden);
Then in your onClick you use this to update the values:
setIsCompleted(!isCompleted);
setIsHidden(!isHidden);
Related
I have a mapped component which iterates through API data. It passes props to each one and therefore each card looks different. See example below.
https://gyazo.com/39b8bdc4842e5b45a8ccc3f7ef3490b0
With the following, I would like to achieve two goals:
When the component is selected, it uses state to STAY SELECTED, and changes the colour as such to lets say blue for that selected component.
I hope this makes sense. How do I index a list as such and ensure the colour and state remains active based on this selection?
See below.
The level above, I map the following cards using these props.
{
jobs.length > 0 &&
jobs.map(
(job) =>
<JobCard key={job.id} job={job}
/>)
}
I am then using the following code for my components:
const JobCard = ({ job }) => {
const responseAdjusted = job.category.label
const responseArray = responseAdjusted.split(" ")[0]
return (
<CardContainer>
<CardPrimary>
<CardHeader>
<CardHeaderTopRow>
<Typography variant = "cardheader1">
{job.title}
</Typography>
<HeartDiv>
<IconButton color={open ? "error" : "buttoncol"} sx={{ boxShadow: 3}} fontSize ="2px" size="small" fontSize="inherit">
<FavoriteIcon fontSize="inherit"
onClick={()=> setOpen(prevOpen => !prevOpen)}/>
</IconButton>
</HeartDiv>
</CardHeaderTopRow>
<Typography variant = "subtitle4" color="text.secondary">
{job.company.display_name}
</Typography>
</CardHeader>
<CardSecondary>
</CardSecondary>
</CardPrimary>
</CardContainer>
)
}
You can attach a handler on the <CardPrimary> component by passing a function to the onClick event. That way whenever you click anywhere on the card div, the function will be triggered.
const [isSelected, setIsSelected] = useState(false);
<CardPrimary onClick={() => setIsSelected(true)} className={isSelected ? "css-class-to-highlight-div" : undefined>
....
</CardPrimary>
If I'm understanding what you're asking for, which I believe is to have your component be highlighted when it is clicked, then you need to modify the 'CardContainer' component to render with an 'onClick' parameter.
Example:
function CardContainer(props) {
const cssClass = 'highlighted';
const my_id = props.id || 'need_an_id';
var clearExistingHighlight = () => [...document.getElementByClassName(cssClass)].forEach((elem)=>elem.classList.remove(cssClass));
var isHighlighted = () => document.getElementById(my_id).classList.contains(cssClass);
var setHighlighted = (e) => {
clearExistingHighlight();
e.target.classList.add(cssClass);
}
return (
<div id={my_id} onClick={setHighlighted}>Cheeseburger fry</div>
)
}
If you don't want the highlight to disappear, you can get rid of the clearExistingHighlight function. Or if you want it to toggle, I recommend a modification of #sid's answer:
const {useState} = React;
function CardContainer(props) {
const [isSelected, setIsSelected] = useState(false);
<div onClick={() => setIsSelected(!isSelected)} className={isSelected ? "highlighted" : undefined>
}
style.css:
.highlighted {
background-color: 'orange';
}
You can do all of this without any react hook and rely instead on CSS classes. You can use the 'isHighlighted' method to determine if a given component is highlighted or not.
recently I have been using react-virtualized library to render my tree item view. I have followed example from the docs however I end up having very strange problem with items disappearing when I scroll down.
I have created codesandbox to show this behaviour and code.
https://codesandbox.io/s/bitter-snow-23vci?file=/src/App.js
Main idea of virtualized list to render it as a list.
If you pass down tree like structure and render it like in your code sample
<List
....
rowCount={data.length}
/>
You don't change rowCount value and keep expanded state in your Node component.
const Node = ({ data, listRef, depth }) => {
const [isExpanded, setIsExpanded] = React.useState(false);
But then you scroll out of screen your Node element will be destroyed and recreated then you return.
You need to keep your selections outside of Node element.
like
// [key]: value structure there key is id of element and value [true, false].
const rootObject = {[elementId]: true};
const App = () => {
const [visibleNodes, setVisibleNodes] = useState(rootObject)
....
<List
...
rowRenderer={({ index, style, key }) => {
return (
<Node
setVisibleNodes={setVisibleNodes}
visibleNodes={visibleNodes}
style={style}
key={key}
data={data[index]}
listRef={ref}
depth={1}
/>
);
}}
rowCount={data.length}
width={width}
/>
And in Node
const Node = ({ data, listRef, depth, setVisibleNodes, visibleNodes }) => {
const isExpanded = visibleNodes[data.id];
const handleClick = (e) => {
if (data.children.length === 0) return;
e.stopPropagation();
setVisibleNodes({...visibleNodes, [data.id]: !!isExpanded});
listRef.current.recomputeRowHeights();
listRef.current.forceUpdate();
};
return (
<div onClick={handleClick}>
{data.children.length ? (isExpanded ? "[-]" : "[+]") : ""} {data.name}
{isExpanded && (
<div style={{ marginLeft: depth * 15 }}>
{data.children.map((child, index) => (
<Node
key={index}
data={child}
listRef={listRef}
depth={depth + 1}
/>
))}
</div>
)}
</div>
);
};
I think it works)
But it's better to do such things like real list and make tree hierarchy just visually. By that way you'll use Virtualisation List as it was purposed by creators)
There is going to be an unusual amount of code here because I am trying to share everything that is going on.
What I am trying to do is... In a list:
Mark services as complete.
Change their color and hide after completion.
Show hidden services on a button press.
I managed to hide each individual service, but couldn't work with the button that hides/shows all of the completed services.
I have a context provider:
const ContextBooking = React.createContext()
const ContextProviderBooking = ({ children }) => {
const [isHidden, setIsHidden] = useState(false); //sharing among both components to hide/show list
return <ContextBooking.Provider value={{ isHidden, setIsHidden }}>
{children}
</ContextBooking.Provider>
}
export { ContextBooking, ContextProviderBooking }
Which is being passed over the BookingsDisplay component in another file
...
<ContextProviderBooking>
<BookingsDisplay /> //this encapsulates each <Booking />
</ContextProviderBooking>
...
I am rendering each of the services in a larger component called 'BookingsDisplay'
const BookingsDisplay = () => {
const { isHidden, setIsHidden } = useContext(ContextBooking)
const display = day => //function that displays each service according to the day it was booked for
allBookings.map( //allBookings is a json file
item =>
item.day === day && (
<Booking
isHidden={isHidden}
completed={item.completed} //comes from json file, all default to false
key={item.id}
id={item.id}
time={item.time}
name={item.name}
date={item.date}
/>
)
)
return (
<div className="bookings">
<h2 className="ib">Next bookings</h2>
<button //This won't work as expected and hide/show all of the 'completed' bookings
onClick={() =>{
setIsHidden(!isHidden);}
}>
Show hidden
</button>
<h2>Today</h2>
<ul> {display('today')} </ul>
<h2> Tomorrow </h2>
<ul> {display('tomorrow')} </ul>
<h2> General </h2>
<ul> {display('other')} </ul>
</div>
)
}
Each 'Booking' component has a button that marks the service as complete. This happens by conditionally changing the class of each component. This works fine as far as I'm concerned
const Booking = (props) => {
const [isHidden, setIsHidden] = useState(props.isHidden)
console.log(props.isHidden) // will output true or false 16 times(there are 16 component in total)
const [isCompleted, setIsCompleted] = useState(props.completed);
return (
<li
className={
isCompleted && isHidden ? 'booking-complete hide' //class names are not changing individually
: isCompleted ? 'booking-complete' //if button is pressed on one of them,
: 'booking' //it may affect the other
}
key={props.id}
id={props.id}>
<h3>{props.date}</h3>
<h4>{props.time}</h4>
<h5>{props.name}</h5>
<button
onClick={() => { //shouldn't this button work of each li and not sometimes all of them?
if (!isCompleted && !isHidden) {
setIsCompleted(!isCompleted); //this changes color of the service as className changes
setTimeout(() => setIsHidden(!isHidden), 200) //after a short time it is hidden
}
else if (isCompleted && !isHidden) {
setIsCompleted(!isCompleted);
}
else {
setIsCompleted(!isCompleted);
setIsHidden(!isHidden);
}
}}>
{!isCompleted ? `Completed` : `Not complete`}
</button>
</li>
)
}
There're two kind of isHidden in your app. I'mma call the one in context the global hidden isAllHidden and the one in <Booking /> the local hidden isHidden.
The problem is you misuse the two. local hidden is an internal state of <Booking />. The reason of it's existence is because you need that 200ms delay of animation, otherwise it can be replaced by isCompleted. So it should be derived from isCompleted instead of isAllHidden.
Fix 1:
const Booking = (props) => {
const [isHidden, setIsHidden] = useState(props.completed)
}
Now global hidden and local hidden combine to decide whether a Booking should hide. You logic should reflect this fact.
Fix 2:
const shouldBeHidden = Boolean(props.isAllHidden && isHidden)
return (
<li
className={
isCompleted && shouldBeHidden ? 'booking-complete hide'
: isCompleted ? 'booking-complete'on one of them,
: 'booking'other
}
>
...
Put together:
const Booking = (props) => {
const [isHidden, setIsHidden] = useState(props.completed)
const [isCompleted, setIsCompleted] = useState(props.completed)
const shouldBeHidden = props.isAllHidden && isHidden
return (
<li
className={
isCompleted && shouldBeHidden ? 'booking-complete hide' //class names are not changing individually
: isCompleted ? 'booking-complete' //if button is pressed on one of them,
: 'booking' //it may affect the other
}
>
<input type='checkbox' checked={isCompleted} onChange={() => {
setIsCompleted(!isCompleted)
setTimeout(() => setIsHidden(!isHidden), 200)
}}/>
<span>{props.name}</span>
</li>
)
}
I setup a demoboard here to show the result.
I want to toggle font awesome icons on click. When the page is loaded i query the backend and find out whether a user is enrolled into a course or not, incase they are enrolled I show a tick icon, otherwise I show a coffee icon.
The end goal is have each individual icon change into the opposite when clicked. Currently when i click the icons, for example if i click a cup icon it not only changes into a tick but changes the rest of the cup icons into ticks too. How can I resolve this issue so that when clicked, only the clicked icon is affected?
Here is my code
Functional component
export const CourseCard = ({
video,
normaluser,
adminuser,
userauthenticated,
adminauthenticated,
handleUnroll,
handleEnroll,
enrolled,
unrolled
}) => (
<Grid item xs={6} md={4} lg={3}>
{(video.enrolled_students.includes(normaluser) &&
userauthenticated) ||
(video.enrolled_students.includes(adminuser) &&
adminauthenticated) ? (
<div className="enrol__button">
<div>
<a href="#" onClick={() => handleUnroll(video.slug)}>
<FontAwesomeIcon
icon={enrolled ? faCheckSquare : faCoffee}
/>
</a>
</div>
</div>
) : (!video.enrolled_students.includes(normaluser) &&
userauthenticated) ||
(!video.enrolled_students.includes(adminuser) &&
adminauthenticated) ? (
<div>
<a href="#" onClick={() => handleEnroll(video.slug)}>
<FontAwesomeIcon
icon={unrolled ? faCoffee : faCheckSquare}
/>
</a>
</div>
) : (
""
)}
</Grid>
Container
export class AllCourses extends React.Component {
constructor(props) {
super(props);
this.user = details(AUTHENTICATED);
this.admin = AdminDetails(AUTHENTICATED);
const token = localStorage.getItem("token");
let normaldetail = details(token);
this.normaluser = normaldetail.user_id;
let admindetail = AdminDetails(token);
this.adminuser = admindetail.user_id;
this.state = {
enrolled: true,
unrolled: true
};
}
handleEnroll = slug => {
this.props.dispatch(Enroll(slug));
this.setState({unrolled: !this.state.unrolled});
}
handleUnroll = slug => {
this.props.dispatch(Enroll(slug));
this.setState({enrolled: !this.state.enrolled});
}
render() {
const userauthenticated = this.user;
const adminauthenticated = this.admin;
const adminuser = this.adminuser;
const normaluser = this.normaluser;
const { allCourses } = this.props;
const {search, enrolled, unrolled} = this.state;
return (
<div className="container">
<Grid
container
spacing={3}
className="courses__row courses__row__medium"
>
{allCourses.map(video => (
<CourseCard
key={video.slug}
video={video}
enrolled={enrolled}
unrolled={unrolled}
handleEnroll={this.handleEnroll}
handleUnroll={this.handleUnroll}
normaluser={normaluser}
adminuser={adminuser}
userauthenticated={userauthenticated}
adminauthenticated={adminauthenticated}
/>
))}
;
</Grid>
</div>
);
}
You can instead a conditional on a boolean try to compare current card key to checked card key
<FontAwesomeIcon icon={this.props.checkedCard == this.props.key ? faCoffee : faCheckSquare} />
and in your container :
handleEnroll = slug => {
this.props.dispatch(Enroll(slug));
this.setState({checked: this.props.key});
}
and :
<CourseCard
key={video.slug}
video={video}
checkedCard={this.state.checkedCard}
It's because handleEnroll and handleUnroll set state that is shared across all the courses. From what you described it sounds like you want the state to actually be per course.
So you should alter AllCourses slightly
handleEnroll = slug => {
// This should cause some change to the relevant course in allCourses
this.props.dispatch(Enroll(slug));
}
handleUnroll = slug => {
// This should cause some change to the relevant course in allCourses
this.props.dispatch(Enroll(slug));
}
// Delete this
this.state = {
enrolled: true,
unrolled: true
};
And then change the CourseCard mapping to use the properties from video rather than the ,now eliminated, AllCourses state.
{allCourses.map(video => (
<CourseCard
key={video.slug}
video={video}
enrolled={video.enrolled}
unrolled={video.unrolled}
handleEnroll={this.handleEnroll}
handleUnroll={this.handleUnroll}
normaluser={normaluser}
adminuser={adminuser}
userauthenticated={userauthenticated}
adminauthenticated={adminauthenticated}
/>
))}
Since you're checking in the Grid component whether the current user is enrolled or not (by seeing if that video.enrolled_students array includes the current user), then those enrolled and unrolled flags don't seem necessary anymore.
So in Grid you should be able to change the first <FontAwesomeIcon /> call to just:
<FontAwesomeIcon icon='faCheckSquare' />
and the second one to
<FontAwesomeIcon icon='faCoffee' />
Also, you have a typo in AllCourses where you're calling this.props.dispatch(Enroll(slug)); in both handleEnroll and handleUnroll where it should most probably be Unroll(slug) in the second one.
I trying to generate a big form based on what I get from the server.
sometimes I generate 32 elements sometimes 57 or 4 I don't know.
I try to create a component for each type of element like select, text, number, textarea and so on.
each component passes the value to the parent component and setState the value to the parent.
imagine I have 20 inputs and custom select-option elements.
when I type something in one of the inputs characters show up after 2seconeds and there is a huge lag in my component.
I know because of the setState method my hole component (I mean my parent component or my single source of truth) re-renders and causes the problem.
in fact, I don't know other ways.
I try to use a "this.VARIABLE" and instead of setState, I update the "this.VARIABLE" and problem solved. but I need my state.
any help or solution?
my code (parent Component, source of truth ):
// ---> find my component based on the type that I get from server
findComponent ( item , index) {
if ( item.type === 'text' || item.type === 'number') {
return (<Text data={item} getUpdated={this.fetchingComponentData} />);
} else if ( item.type === 'longtext') {
return (<Textarea data={item} getUpdated={this.fetchingComponentData} />);
} else if ( item.type === 'select' ) {
return (<SelectOption data={item} getUpdated={this.fetchingComponentData} />);
} else if ( item.type === 'autocomplete') {
return (<AutoTag data={item} url={URL1} getUpdated={this.fetchingComponentData} />);
} else if ( item.type === 'checkbox_comment' ) {
return (<CheckboxComment data={item} getUpdated={this.fetchingComponentData} />);
} else if ( item.type === 'multiselect' ) {
return (<Multiselect data={item} getUpdated={this.fetchingComponentData} />);
} else {
return (<p>THERE IS NO TYPE OF => {item.type}</p>);
}
}
// ----> if i setState here ==> big lag
fetchingComponentData(OBJ) {
let index = null;
// let Answer = [...this.state.Answer];
index = Helper.find_item(this.Answer , OBJ , 'unique_key');
if ( index === -1 ) {
this.Answer.push(OBJ);
} else {
this.Answer[index].value = OBJ.value;
}
}
// ----> in my render method
render () {
return (
<React.Fragment>
<div className="row Technical section" data-info="Technical">
<div className="col-6">
{data.map( (item,index) => {
return (
<React.Fragment key={index}>
<div className="rowi">
{item.attributes.map( (item, index)=> {
return <React.Fragment key={index}>{this.findComponent(item, index)}</React.Fragment>;
})}
</div>
</React.Fragment>
)
})}
</div>
<div className="col-6"></div>
</div>
</React.Fragment>
);
}
Have you tried to make an object out of your components and pass it to setState at once?
const nextState = componentList.map(component => {
return {[component]: value};
});
this.setState({...nextState});
Edit: Okay i got another part you could do better.
You should build an array with you components in componentWillMount function instead of fetching all the data inside the render. Like you said, it's updating everytime any state changes, and all the components are also updating with the parent.
This is to be made in addition with what I suggested before, but it is of far more importance because of the impact on the ressource.