I need a component that will look like this and depending on state something should change. (The point is to show progress of an page. for example 1- choose food, 2-choose drink, 3-choose payment method)
It feels like someone should have shared similar component somewhere, in the past but I cannot find the right name for my google question. Can someone help me with the right name for it or possibly give link to stackoverflow question about similar component?
You can use this https://bit.dev/primefaces/primereact/steps from https://bit.dev.
There should be also a lot of other useful components
Related
I want to implement an idea using react-tabs where I change the content displayed in the TabPanels depending on a particular state.
I have tried to implement this by having a parent component (AppTabs) that depending on the value of the state (let's call it mode) it renders one of two different components: Tables or Graphs.
These two components return the TabPanels with the content that each of them should render.
Here is the code:
AppTabs:
AppTabs code
Tables:
Tables code
Graphs:
Graphs code
When I try to execute this, I get the following error message:
Warning: Failed prop type: There should be an equal number of 'Tab'
and 'TabPanel' in Tabs. Received 2 'Tab' and 0 'TabPanel'.
Does this mean that I need to declare all of the pieces of react-tabs (Tab, Tabs, TabList, TabPanel) in the same component or else it won't work? Or am I doing something wrong?
I want to do it this way because then I could have all of the states regarding the Tables component or the Graphs component separated. Otherwise, I would need to set all of the states for both of these components in AppTabs and I think that would be very cluttered and a nightmare to maintain.
Thank you for your feedback in advance! Have a great day!
I have an answer for this issue.
I asked the react-tabs team about this issue as well and this was their answer:
Hi. Unfortunately there is no way to declare your TabPanels in a separate component; the Tabs component can't detect them through the component boundary.
The team provided some suggestions on how to deal with this situation. They are explained in the discussion we had over at their github page.
Here is a link to the issue if anyone is interested in it: https://github.com/reactjs/react-tabs/issues/481
I hope this can be useful to someone else,
have a great day!
I was always wondering if I should use redux store all the time even when it's not really necessary.
For example:
I have form with select field that has some options I fetch from API. Let's imagine that form is for adding new car listing and select options are car models. Should I directly call API from component and display options or should I create store CarModels or something like that and store results from API there and then map those values to state in component?
I have "Favorites" feature, when you click heart next to some item (let's say a car), do I need to go through dispatching all events FAVORITE_CAR_REQUEST, FAVORITE_CAR_SUCCESS etc... or is it good enough to just call API directly from component (using some kind of api-service of course).
It's related to question above. If I have screen where I show favorites, I should then probably have store and connect everything with actual favorite action so I update the list. On new favorite, API will return favorited item, should I push that one in list of favorites already in store or should I just load again latest list when user opens up the favorites screen?
Thanks in advance.
I think this is a perfectly valid question. What I feel like you're trying to ask is if you could/should mix react state and the redux store. The answer is sure! Just think about where you need to use that part of state before deciding where to store it. If you need a part of the state in multiple components, it probably makes sense to use Redux. If you only need state locally, perhaps to set form validation errors, maybe use react's state management if you feel like it. React and redux are both meant to be flexible, so as long as you're consistent in when you use the redux store and react state you should be good.
I found this article that also explains this pretty well: https://blog.jakoblind.no/is-using-a-mix-of-redux-state-and-react-local-component-state-ok/
I tend to use redux when the state has to be accessed globally / complex logic that i want to be logged properly
Anyone know what is the problem? Each post is a component on its own. When I click the comment button of the second post, the comment box on the first post appear instead.
You code showing that you have written code for like and unlike a post in you Post component. The code is common for all posts. Try to create a separate component for like section.
See this SO for a similar example: React toggle like button
For those who might come across this thread later, I haven't found any valid solution by now. Thus, how I solve this is kinda a bit hacky and might cost a lot of time if your app is quite complex. I added id(not HTML id) to each post and loop through each post and check the id with the id of the element that emits the action to show comment box. If they match simply set the display of the comment box to block.
I have a requirement to open/close additional row details.
Has anyone implemented or have ideas on how to go about implementing expand/collapse feature for each row?
There's a template of sorts for this sort of thing (demo, source) The important bit is that you'll need to tell your List/Grid/whatever when an open/close has changed (aka when size might have changed), eg:
this._listRef.recomputeRowHeights(indexOfChangedRow) // Clear cached size
this._listRef.forceUpdateGrid() // Rerender list with new size
For what it's worth ... :-)
CodeSandbox sample
I was looking for the same feature, but I did not find some useful results as I searched, maybe this sandbox helps others looking for a similar feature in their apps:
The example is using Table from react-virtualized beside react hooks.
Example
I'm going to create a large scale application with react and redux and start to build the header component of the layout very first time. The layout header will have 4 child parts.
1. Icon that will show all the online users after clicking on it
2. Icon that will show latest 10 notifications after clicking on it
3. Icon that will show latest 10 messages received after clicking on it
4. Logged in user name that will be dropdown button to show some "My profile, logout, account setting" navigation links.
As I've read about redux at so many places that we must have as less as possible stateful components. So by keeping this concept in mind, I thought to have only one header smart container with a header state consisting default states for all icons like
{headerOnlineUsers:[], headerMessages:[], headerNotifications:[]}.
So if I follow the redux best practice and create only one smart header container with 4 different dumb components, the each and every time the state of any of them is changed, the whole header container will get re-rendered.
But I want to re-render only the state changed component.
For example, If I get a user joining the chat through websocket, It will dispatch an action and the reducer will update the headerOnlineUsers list of the state. But In this case I want my only online users component to be re-render not the whole header container.
Can anybody please suggest me the best approach to implement this kind of layout.
I would not go for your option, but would prefer a more granular approach.
What if you split the header in 2 later on, or want to display the button somewhere else ?
What if you have another version of your header for a subsection of the website ? You would need another container that gather again all the info.
The logic in general in redux is to separate what is data-sensitive and what is not. Your individual lists are data sensitive, the header in itself has no reason to be so far. What's more, if you want to attach actions to the icons it will quickly become messy to bring back thoses actions to the header and then its container, and even messier if you ever need to move them.
The way I would do it (and the way I do it right now as I halso develop quite huge app with react and redux), would be to have a store with those 3 lists of items, and then 3 containers, one for each icon/dropdown that links one aprticular list to the component.
Then the header is just a stateless function holding all the containers together. This way if you ever need to move one button somewhere else or reuse it, you just import the container and voila!
React.js will take care of only re-rendering what is required. So this problem is already solved for you :-)
What you plan to do sounds sane to me, I just would change one bit: The smart header container should not use internal state. Instead, your redux store should look like this:
{headerOnlineUsers:[], headerMessages:[], headerNotifications:[]}
and you should pass the redux store into the smart header container (have a look at the connect function in the redux documentation). This way, you can use the redux store contents in your component via this.props, and that's it.