I started to play around with react select and I what I cannot seem to find in their documentation is to how to do error states. Does react select have a built in way to tell it that its in error states and make the border red?
Add class based on selected value stored in state.
Live demo: https://codesandbox.io/s/react-select-error-handling-60093
Related
I am implementing a form in react using react hook form, The form has two select fields country and states.
Second field changes the option based on the selection in first field.
Please see the below sandbox for more details
Creating/submitting the record works perfectly fine.
The problem is: In edit, when I pre populate the values in the form using setValue(), it does not set the second dropdown(state select in the sandbox below) values on the UI but it shows that it has set the value to the field(see in the console for field state).
[CodeSandBox] https://codesandbox.io/s/angry-murdock-h0lbsp?file=/src/App.js
Steps to reproduce:
Open this sandbox in the browser.
Click on the SET ALL VALUES button.
See the blank value in states select
Also, Whats the best way to populate a form like this, i.e. in defaultsValues or useEffect?
What am I missing here, so putting it for the experts here.
Thanks for your time.
The problem you are having is about setValue. This function does not trigger a re-render in most cases. You can use reset instead.
https://react-hook-form.com/api/useform/reset
Also, if you'd like to fill the form without any user interaction, use reset in useEffect with proper dependencies.
Lastly, If you'd like to have just them having initial values instead of being undefined, set defaultValues. It is also recommended in official documents:
Important: You should provide a proper default value and avoid undefined.
undefined is reserved for fallback from inline
defaultValue/defaultChecked to hook level defaultValues. undefined value is conflicting with controlled component as default state
https://react-hook-form.com/api/useform
I am using React and NextJS and Algolia's React InstantSearch, I am having an issue trying to filter results that do not equal an attribute I currently have. I have buttons where I want to display hits where isNew:true and and another button to show results that are isNew:false as well as hits that do not have this attribute as well, so something like isNew:undefined.
I have tried the Configure connector with <Configure filters="type:Posts AND (NOT isNew:True)" /> but it does not seem to work as it will only always show hits where isNew:false.
Is there a way to have isNew:false always include the undefined hits as well? I want it to show both types of hits when the button is clicked and if a user visits the route with isNew=false declared.
No, you can't.
The Algolia engine doesn’t support filtering on null value or missing attributes.
You have the choice between adding the isNew:false attribute to all objects that doesn't already have this attribute or using a tag.
You can check the documentation :
https://www.algolia.com/doc/guides/managing-results/refine-results/filtering/how-to/filter-by-null-or-missing-attributes/
Looks like React DnD expects draggable/droppable items to be siblings in order to work properly. If one of the items belongs to another parent I get "Expected to find a valid target." as soon as the drag over event fires (when the swap should trigger).
I tweaked an example from their docs in case anyone would like to try it out:
broken example: https://codesandbox.io/s/broken-feather-qf0f2?file=/src/Container.jsx
Tweaks are at the bottom. Note that the first card item is rendered separately from the remaining ones, in another div.
In order to trigger the error just drag & drop the first item into another one. Notice that if you drag & drop any other items they will work.
original example: https://codesandbox.io/s/github/react-dnd/react-dnd/tree/gh-pages/examples_hooks_js/04-sortable/simple?from-embed=&file=/src/Container.jsx
Thank you!
Could be an issue with react-dnd.
Check out this issue https://github.com/react-dnd/react-dnd/issues/361
From the issue that I had, the hover handler was updating the table/grid too fast. It was setting the state of the items and I guess DnD applies a new target id, hence the error.
Try adding a debounce on the hover handler with trailing option set to true. The problem is that the component is updating too quickly and the target id that DnD is expecting, has already changed due to the state change. It may help to add some checks in there to make sure that the item is droppable as well.
Due to #DDT's answer, I managed to solve the problem I was experiencing.
In the useDrop function I was updating the table/grid too fast after the update function from immutability-helper.
So I added a state variable e.g. wasDragDropped with an useEffect hook on it.
I change the wasDragDropped variable when useDrag is finished, and then update the table/grid via functionality in the useEffect hook.
(using react-dnd 14.0.4 and react-dnd-html5-backend 14.0.2)
We are developing a huge application with React. One of our forms includes 60+ plus components placed on different Tab items.
When i try to edit an input it took 190ms to see typed chars in the textbox. After digging the problem for hours we realized adding a component increases the response time. Then we decided that the problem is antdesign s render logic. Then we tried it with PrimeReact using "why-did-you-update" package. The result was same!
When any change occurred in the state, all the components ( including Icons :) ) tried to render per "why-did-you-update" messages.
Here is the sandbox : https://codesandbox.io/s/6w30ro2l9w
Are the "why-did-you-update" messages wrong or we missing something?
I'm making a react app using antd, I'm trying to add modal but it doesn't work, every time I click the trigger button I got errors saying "Uncaught Error: Element ref was specified as a string (header) but no owner was set. You may have multiple copies of React loaded.". Im following this syntax from https://ant.design/components/modal/
I found related problem https://github.com/jrm2k6/react-markdown-editor/issues/55
and according to react
https://reactjs.org/docs/refs-and-the-dom.html#legacy-api-string-refs
they dont recommend using ref attribute, instead use a callback pattern.
I dont know what to do..
Any help, thanks.