I get this console warnings when I run my react app using bootstrap react. I believe they are from the LinkContainer I use in my navigation page. But how can I fix this?
warning.js:36 Warning: Unknown prop `active` on <a> tag. Remove this prop from the element.
in a (at index.js:18)
in LinkContainer (created by IndexLinkContainer)
in IndexLinkContainer (at index.js:17)
in NavbarBrand (at index.js:16)
in div (created by NavbarHeader)
in NavbarHeader (at index.js:15)
in div (created by Grid)
in Grid (created by Navbar)
in nav (created by Navbar)
in Navbar (created by Uncontrolled(Navbar))
in Uncontrolled(Navbar) (at index.js:13)
in div (at index.js:12)
in Appnav (created by RouterContext)
in RouterContext (created by Router)
in Router (at index.js:49)
As you may know <a> doesn't have active attribute and you are passing this from your react component.
What you should do instead is extract all the props that are not valid attributes and use them as you wish
const {active, ...attributes} = this.props;
// do what you need with `active`
return (
<a {...attributes} />
)
Related
Currently in my application I have a screen that is connected to the deep links through react navigation. When I open this screen, background the application and then try to open a deep-link, react navigation opens the existing screen on the navigation stack.
I want the linking options to trigger a completely new page on top of the existing one and put it in the stack, is this possible?
You can do this by specifying a getId function:
<Stack.Screen
name="Profile"
component={ProfileScreen}
getId={({ params }) => params.userId}
/>
The getId function should return a unique ID to identify the screen - usually, the ID of the item shown in the screen, React Navigation will only reuse the screen if the ID is the same.
https://reactnavigation.org/docs/screen/#getid
I have this code, please see the title prop:
const App = () => (
<Admin
theme={theme}
customRoutes={customRoutes}
menu={Menu}
dataProvider={loopbackRestClient(window.apiUrl)}
authProvider={authClient()}
dashboard={Dashboard}
locale="en"
i18nProvider={i18nProvider}
title={`Dashboard - ${window.accountData ? window.accountData.accommodation.name : ''}`}
>
// more code here...
This tries to change the rendered title when login succeeds and therefore we get different accommodation.name value from there.
I was expecting that the component may re-render with this event, since login affects the REDUX state, so the window variable (which changed after login) should render a different title.
It did not work.
How may we do it the proper way (react-redux way)?
You can make a custom and connected Title component and pass it as the title prop.
https://codesandbox.io/s/1072ry6rl7
Note that my custom Title component has to support a className prop. This is a material-ui requirement.
You should save that accountData you currently have on the window object in the Redux store in its own Reducer. And when your LOGIN Action is fired I would update that accountData with the new data.
I am trying to make a single page application in which I have 3 components : Index, BluePage and GreenPage
I'm trying to use React and React router to switch through them. The layout is as follows:
This view is supposed to be like a sliding page and can be better visualized like this following diagram:
In order to do these transitions, I am currently using ReactCSSTransitionGroup and CSS classes, however it is becoming difficult as the direction the page must animate depends on the page that was being viewed before.
For example, if the BluePage was in view, and the user pressed the "back", button, the Index should move into view from the right.
On the other hand, if GreenPage was originally in view, the Index should move into view from the left.
The Question
How can I use React Router to send the existing path to the next component, so I can animate the components properly?
Should I continue to use ReactCSSTransitionGroup or should I handle animations in the componentWillMount and componentWillUnmount callbacks?
If so, how does adding CSS classes to objects after initial rendering work?
I apologize if these questions seem somewhat novice - I am still a beginner to ReactJS. Thanks for all the help!
If any clarification is necessary, let me know.
I would recommend you to check react-swipeable-views.
In this component, you just need to add all of your views (components) as children of the SwipeableView component. The currently active view is defined by index prop of the SwipeableView. You switch the view with buttons, you simply need to create a state in the main component (App, for example) and update this state in onClick handler. It would look like this:
class MainComponent extends Component {
state = {
index: 0,
}
onBlueButtonClick() {
this.setState({ index: 1 });
}
render() {
return (
<div>
<div onClick={() => this.onBlueButtonClick()}>Click me!<div />
<SwipeableView index={this.state.index}>
<BlueView />
<GreenView />
<RedView />
<SwipeableView />
</div>
);
}
}
Hope it helps! ;)
EDIT: I have added a button in the example to explain how to use this component when there is no swipe effect. This is a React component and not a React Native, so it was made to work on a website, therefore without a swipe. I use it in one of my projects. Here's a GIF of it.
What I would suggest you is tu use swiper.js. Why?
performant (desktop, mobile)
no jquery needed
huge api, with very usefull features for your use case
change slide programmatically: swiper.slideTo(2) or swiper.nextSlide())
Hash/History Navigation: sync between hash and slides
you can disable touch gestures
etc..
Setup
npm install swiper --save
Import
const Swiper = require('swiper');
or
import Swiper from 'swiper';
Usage
see demos with example
I have javascript files defined in the <head> of both my layout decorator template and my individual pages which are decorated. When I update a thymeleaf fragment in one of my pages the javascript defined in the head of the parent page no longer works. Is there a standard way to 'refresh' these js files?
Thanks.
Additional clarification :
I have a form submitted by an ajax call which updates a table in the page. I have a Jquery onClick function targeting a button in the updated table. The javascript doesn't seem able to bind to the returned elements in the updated part of the page. I select by element class and can see that the selection works prior to the partial fragment render.
For me it is unclear what you mean by
javascript defined in the head of the parent page no longer works.
The page is created on the server. Normally it contains urls of the javascript files
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
In this case 'refreshing' the javascript files can happen only in the client.
Check the html of the page in the client.
Are the tags as expected ?
Are there tags for all expected javascript files ?
With the browser tools (for example Google Chrom developer tools ) check that all script files are actually loaded.
If this doesnt help, it could be that the order of the script tags has changed between the first and second load. This could cause a different behaviour of the javascript executed in the browser.
EDIT :
With the initial load you bind javascript callbacks to dom elements.
You do this directly or through Jquery or other libraries.
When a new dom element is loaded, it has no callbacks bound to it, even if it has the same id as a replaced dom element.
So after the load you have to bind your callbacks again.
If you bound them 'by hand', just bind it again.
If you are using a JQuery plugin, that made the bindings, look into the code or documentation, many of them have a function for that or you can call initialization again.
Once you added new content to the DOM you need to bind again the new content.
Let's say I have a button with some class, the event in binded to the class:
<button class="someclass">Button 1</button>
<script>
var something = function() {
// do something
};
$(".someclass").on("click", something);
</script>
If I add more buttons from the same class to the DOM, they will have not have the click event binded. So once you load the new content via ajax, also remove all binding and add again (you need to remove or you will have buttons with 2 events).
$(".someclass").off("click");
$(".someclass").on("click" , something);
I have a first Ui-View called A that dynamically loads a page fine.
I then put another link (or route) in the page A, however Ui Route wants a ui-view in page A.
How can I go back to the orginal ui-view, and place page B in that instead of A's?
Im trying to have a nested route go into the orginal UI-View instead of a new one.
By naming UI-View's you can define where the router will put the view.