How to target a list of DOM elements within React - javascript

So I'm currently doing Brad Traversys 50 projects in 50 days, but I wanted to do it built in Next.js with React for practice, as that's what I use at my job.
As you can see from me posting here, it's not going so well! I'm already running into road blocks.
I'm trying to create a set of cards, that when one is clicked, it expands out. Outside this, if there is a card already expanded, and another card is clicked, I need the previously expanded card to collapse, whilst the card currently clicked expands.
I'm currently trying to work off an active state, and passing that down to the Panel props, but obviously that just sets all the flex's to be the same and nothing happens. But when I try to define the active useState inside the Panel component, it works, but I can't then target the other active states in the other Panels, to set them to false.
You can see my code on this CodeSandbox https://codesandbox.io/s/nifty-goldberg-5noi4?file=/pages/expanding-cards.jsx
You can see the correct functionality here https://50projects50days.com/projects/expanding-cards/
What's the best way to go about this?

You need a logic like Accordion control in Material UI. As in my comment, here is the example.
https://material-ui.com/components/accordion/#controlled-accordion

Related

Redux or simple React to handle navigation

I am very new to React and Redux and I am currently trying to wrap my head around how states are shared through the UI.
I have a pretty simple use case.
Picture a container with three columns:
A left Side Menu with four buttons
A central content section
A right container with some other content
When I click one of the four buttons I want three things to happen:
The class on the button is updated so it has borders
The class on the other buttons is updated so if they had been clicked before their border class is removed
The content in one part of the middle section is updated. This content requires data from the backend (Django Rest) to be fetched
Here are my questions:
Should I separate this interaction into a UI only concern and a Data driven one or handle both with a single state?
Because the buttons share a parent component but they do not with the central component, would I be better off using Redux if I do not want to define the state at the very top level of the Container?
Because I am new and Hooks seem to be the way to go I am trying to use hooks rather than classes, does it still make sense to separate components and containers?
You can use react-router-dom library to achieve want you want.
for your left side menu you can create active class in css and then check for current route with location.pathname property of react-router-dom and if it is for that button, active class set for it.
and for your main section you can fetch data in useEffect hook.
I think it is good to separate data and UI but for buttons what I say is good.
and you can store data in redux for your main section.

How to create a Horizontal Recycle View in React-Native?

I have a list of questions that I have to get from an API, and I want to render each question one at a time so when I press one of the three buttons (yes, no, maybe) the next question renders.
Ex. 1st question pops up -> You answer it -> 2nd question comes -> You answer it -> Process repeats until the last question.
Recycle View
This is how I want it to kinda look, I tried using the react-native-recycler-view-list but it didn't work.
How do I make this kind of list?
If you wish to have an optimised list view in react native just like recycler view of android, you can make use of FlatList. But, you can have optimisation either horizontally or vertically but not both ways at a time. You can simply import FlatList from react-native in your component.
You can go through this link https://facebook.github.io/react-native/docs/flatlist.html to know more about FlatList

Google Inbox-style navigation with vue-router

I'm building an app with vue-router and trying to achieve a UI similar to that of (the now defunct) Google Inbox. Or the Techcrunch homepage, which is possibly a better rendition of what I need.
there's a list of items
when you click on one of those items, it "expands in place" to display more details.
the URL also updates to reflect the expanded item
when clicking "back" the item collapses back into the list
when accessing the URL directly, the page should display the expanded item, and (optionally) could display more list items below.
Thing is, I can't figure out how I would build this - I'm trying to start from the idea of child routes, but I don't know where to place the child <router-view> since its location will always be dynamic based on which item was just clicked in order to expand.
I have a hunch it's related to named views but I can't wrap my head around it.
Any ideas welcome!
A similar topic came up on the Vue github page a while back, but involving the opening of modals as opposed to opening collapsing containers. One of the contributors to that thread wrote a pretty good blog post that might point you to a solution.
Once you get the dynamic routing sorted as they did above for modals, swapping the blurb for the article and animating the expansion should be fairly simple. The Vue docs cookbook has a good article on building a dynamic blog that should come in handy as well.

Prevent events from refreshing parts of dom using only frontend options (asp.net)

DISCLOSURE: Until this project, I hadn't coded anything since 2000. While I am a quick study, a lot has changed. So, go easy on me?
I'm working on tweaking the UI for my web store. On both the cart page and on the item pages there are events (i.e.: change of quantity and add to favorites) that have to refresh elements of the DOM, like the total price. The issue is that when it refreshes that, there are other elements like the action button or a couple of the DIV containers like the table that the quantities are in get refreshed too.
I'm using CSS and JQuery to tweak the UI since I only have front-end access to editing anything. If I edit things through CSS I'm fine, but any JS work is thrown out. I'm adding classes to existing elements and removing the ones I don't want.
When they are refreshed, the original classes come back and mine are gone.
For example, here's a link to the page: https://billingsley.orderprintnow.com/ProductDetails.aspx?TemplateOrderItemId=0a491fc1-d9c2-44b4-9a16-32ab3ee89b08&PortalId=1f5a8f5f-344e-40da-aa93-387e73c1c82c
the button is pink at first, but if you click on a radio button to change the quantity or click the heart at the top to add/remove from favorites the button will change to the default Bootstrap version. I don't want that to happen.
Any ideas on what to even research to find a workaround? Feels like if I could mark certain elements to be isolated from the refresh life would be easier. Thanks in advance!

React Rendering different Children Components on button click

chatbox
profile view
So these are mockups for my social network project.
My question is that when a user logs in he is presented with this view.
There are two parent components THE LEFT PANE and RIGHT PANE.
THE LEFT PANE remains there for the whole session. BUT inside right pane I have to render
Chat box(when someone clicks on a friend from the list).
Pending request Component(When the see pending request button is
clicked)
Search Friends(When make friends button is clicked)
Profile View (When someone clicks on the interactive I button
Priorities:
I do not want to show the change in the address bar when any
component changes. So cannot use Browser Router.
Possible Solution but in doubt
I could use Conditional rendering by attaching some state variable
with each button click and when that button is clicked determining
the state i should render that specific component.
I could use Memory Router in react router in order to keep the code
clean and do not show the change in the address bar.
Help
CAN ANYONE WITH A GOOD EXPERIENCE IN REACT TELL ME IS THERE ANY OTHER WAY OF DOING THIS? AND IF NOT THEN WHICH IS A BETTER OPTION BETWEEN THESE TWO?
Pls refer to the images to get full idea about the situation.
thanks.
P.S. I can only post two links the other two components of pending request and make friends would be loaded the same way inside the right pane.
I think the best way would be to use the memory router Coz it would help to keep your code neat and understandable for reusability

Categories