React warning when using ReferenceInput with RadioButtonGroupInput - react-admin

When using the RadioButtonGroupInput inside ReferenceInput I get some warnings from React:
React does not recognize the setFilter prop on a DOM element
React does not recognize the setPagination prop on a DOM element
etc...
It seems the RadioButtonGroup does not support this props, is this a bug?
Here is an example, it only appears the first time we click an item of a list. After we need to reload to see it again
https://codesandbox.io/s/6j878j2263

Related

Problems with Kotlin react router dom element attribuute for binding a react component to URL

I'm currently working on a sample application to learn Kotlin/Js with the react library. When using the normal JSX syntax, a component can be set to be triggered when a specific URL hits using the BrowserRouter & Route API like below.
Main Component
Navigation Component as directed like in this youtube video
When attempting the above code in Kotlin, it resembles something like the screenshot below using the KotlinDSL
The main function where the component is rendered is shown below
However, that creates an Uncaught Error Exception like the one below
One of the reasons its also so difficult to debug is because my source maps dont work and hence most of my debugging errors are actually in Javascript. But anyways after searching up the javascript error, I found this article about the new Router update that disallows adding components as children.
As a result I tried to pass in the components through the element prop but there seems to be some incompatibility with them.
the element prop accepts an optional ReactNode? and I cant seem to convert my Function Component of type props to a ReactNode. When I try to pass in an optional ReactElement? by calling the create method, I also get an error.
I have been struggling with the Kotlin Documentation and can't seem to find enough examples of react-router implemented.
Can anyone help me out with how to pass in a Function COmponent into the element prop for the React Router?

I am following tutorial and doing the same steps, but my swiper its not working in react js

i did
npm i swiper and imported all swiper imports but the problem is its saying in console 'Objects are not valid as a React child (found: object with keys {clickable}). If you meant to render a collection of children, use an array instead.'
and showing an error to closing tag of swiper like this '>'showing that this is wrong but i am doing the same thing as the video doing :(, i did />, million times checked but still not working

Components for only tabs in React-Native

I want to achieve this in react-native,
Is there a component that have this tab switching animation with also capability off adding an icon next to tabName if possible.
P.S: I found a component react-native-material-tabs but without the ability to an icon. Also found components that requires container component, where I just need one for tabs for my use case.

CSS-less vue component fails when copied from vue2/vuetify project to vue2/tailwind

I have written a very simple, learning "hello world" type component, in the vue 2/typescript 4 project at:
https://github.com/sldev2/vr-vtsv-timeline
This project was made with vue ui. I've added #vue/composition-api 1.0.3 and vuetify 2.4.0
The component is called CompositionApiEg.vue. It doesn't use any explicit vuetify styles. When you browse to http://localhost:8080/, It displays 3 names, and allows you to increase "capacity" by clicking the button with text "Increase Capacity". (The button border does not show. I know not why; I assume I need a vuetify button style) There are no runtime errors in the browser.
The CompositionApiEg.vue file is here.
I've tried transplanting this component into another vue2/typescript 4 project also made with vue ui, with the composition-api added, but that has tailwind instead of vuetify. The component was not modified in any way. In particular, no tailwind styles were added.
This project is at: https://github.com/sldev2/v23tstw
Now, however, this component is throwing a bunch of runtime errors, such as:
warning eg:
vue.runtime.esm.js?d04a:619 [Vue warn]: Property or method "spacesLeft" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
error eg:
vue.runtime.esm.js?d04a:1897 TypeError: _vm.increaseCapacity is not a function
at click (CompositionApiEg.vue?c6d9:27)
at invokeWithErrorHandling (vue.runtime.esm.js?d04a:1863)
at HTMLButtonElement.invoker (vue.runtime.esm.js?d04a:2188)
at HTMLButtonElement.original._wrapper (vue.runtime.esm.js?d04a:6961)
Why does the exact same, very simple component succeed in one vue2 project, but not in another?

vue-select v-model reduce not working / Nuxt js Vue js

I'm using vue-select.
When I want to display the selected element, it shows me the value and not the text (see the screen).
I saw on several reports (and on the documentation) that I could use reduce.
I also saw that I could add a ":key" props on the component but that doesn't work either.
Here I choose the item :
Here the selected item, it displays the value and not the text : (Here the problem)
My component file (input-custom.vue) :
My component in page:
Data in page:
I found the solution.
This is my "handleInput" method.
I emit "e.value" but I want to emit the Object, so replace "e.value" => "e"