Why does Flatpickr component from react-flatpickr does not render at all?
I created a React component that renders the <Flatpickr /> component with some additional options. The component is rendered but the<Flatpickr /> does not render at all. When using the <Flatpickr /> component in another file it works.
Answering my own question in case someone has the same issue:
Make sure you import correctly
import Flatpickr from 'react-flatpickr'
from react-flatpickr and not flatpickr.
Related
I am using i18n so that my app is multilingual. This seems to work fine, except for when I'm testing the app.
I render a component named ProjectNavigation in my test. This component uses the useTranslation hook to translate some words in my project navbar.
import React from 'react';
import {
render,
screen,
} from '#testing-library/react';
import ProjectNavigation from '../pages/ProjectNavigation';
test('Checks to see if project navigation is rendered', () => {
render(
<React.Suspense fallback="Loading...">
<ProjectNavigation useSuspense={false} />
</React.Suspense>,
);
expect(screen.getByRole('navigation')).toBeVisible();
});
When I render with suspense, the only thing that loads is the fallback, which is currently set to "Loading...".
I've tried useSuspense={false} when rendering, but the test will not run and I receive this error:
ProjectNavigation suspended while rendering, but no fallback UI was specified.
Add a <Suspense fallback=...> component higher in the tree to provide a loading indicator or placeholder to display.
It seems the component is not able to render, and this is why it only shows the fallback.
Anyone know how to deal with the component not being able to render?
I try getting my React Search box filter to work.
See this sandbox what I have so far.
I have a HOC withSection.js where I add (for now) just a <section> tag to my Components:
const withSection = Component => props => (
<section>
<Component {...props} />
</section>
)
Then in the parent Component I wrap my SearchBox Component into this HOC and render it:
const SectionSearchBox = withSection(SearchBox);
<SectionSearchBox search={search} setSearch={setSearch} />
Somehow, as soon I wrap my SearchBox into this HOC, it breaks the functionality?
Whats wrong here?
You need to declare SectionSearchBox outside the scope of its parent component. In the codesandbox example it would look something like:
import withSection from "./hoc/withSection";
import SearchBox from "./SearchBox";
const SectionSearchBox = withSection(SearchBox);
function ArticlePage() {
...
};
Otherwise every instance of that component is going to be recreated with each new render of its parent (i.e. when the search term changes). This was causing the search box to appear unfocussed with each key stroke, as a new input element was being put in its place with the value from the previous render.
I am trying to make all React Components' data to be available through Redux. I need it so that any component can easily modify / interact with other component.
But I don't know how to inform Redux about the fact that React Component was mounted / unmounted, because the component itself has no info about its place in the React tree. Let's say that we have a list of three React Components in our main App.js:
<div>
<ClickCounter />
<ClickCounter />
<ClickCounter />
</div>
ClickCounter is implemented here:
import React from 'react'
function ClickCounter() {
const clicks = useSelector(state => state.UI.ClickCounter[/* What is my id?*/].clicks)
return (
<div>
</div>
)
}
export default ClickCounter
This lonely ClickCounter function does not know whether it was called by the first, second or third <ClickCounter />. No info about the React tree from the component level - no synchronizing with Redux.
I stuck and don't know how to implement it. Thanks for your time in advance!
I am rendreing the DOM element, which get data from the local state. With the press of a button, state changes with this.setState({}) and DOM element re-renders it. How to animate that change of state?
Git: https://github.com/TyroniUA/v.rudovtsymbalist-gmail.com
<StepsCard number='01'
id='number-one'
numberbckg='#00A9E7'
h2width={this.state.h2width[0].one}
h2={this.state.displayText[0].title}
p={this.state.displayText[0].text} />
<StepsCard
number='02'
id='number-two'
numberbckg='#B9D67B'
h2width={this.state.h2width[0].two}
h2={this.state.displayText[1].title}
p={this.state.displayText[1].text} />
You can use react-transition-group package for that.
just import TransictionGroup and CSSTransition from that component and wrap your JSX you need to animate. It requires a key on basis of which you need to animate, that is some state in your case.
import { CSSTransition, TransitionGroup } from 'react-transition-group';
<TransitionGroup>
<CSSTransition key={this.state.value} timeout={1000} classNames="messageout">
<YOURJSX/>
</CSSTransition>
</TransitionGroup>
Here is an example of it: https://codesandbox.io/s/nice-dubinsky-zmwpu
I have a react app, I would like to process react components and modify classNames before they are rendered to DOM. Is there any way to do that?
For example transform <div className='bg-primary' /> to <div className='background-blue' />.