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
Related
We use Reakit dialogs to prompt users to take an action in our React web app.
On some pages, we have specific text related to the action and would like to render this specific content in the dialog. On all other pages, we want to fall back to generic text.
Our simplified component hierarchy for generic pages looks like:
<BaseLayout>
...
</BaseLayout>
and for a page where we want to show specific text,
<BaseLayout>
...
<SpecificPage/>
...
</BaseLayout>
What we'd like to happen is:
On pages that render the SpecificPage component, the Dialog appears with the specific text
On pages that do not render the SpecificPage component, the Dialog appears with the fallback generic text
Our approach was to have the SpecificPage component render a Dialog with the page-specific text, and the BaseLayout component render a Dialog with the generic fallback text, but this approach isn't ideal -- users see a flash of the BaseLayout dialog before the SpecificPage dialog is rendered. Is there any way to define a single component that is "overridden" by descendants in the component hierarchy, or other way to achieve this conditional rendering?
You can simply check if you're rendering anything as children in the BaseLayout component or not, If not you can fallback to generic text.
Here's an example.
App Component
import React from 'react';
import { BaseLayout } from './BaseLayout';
export function App(props) {
return (
<div className='App'>
<BaseLayout>
<h1>Hello World.</h1>
</BaseLayout>. // Renders hello world
<BaseLayout /> // Render generic text
</div>
);
}
Base Layout Component
import React from 'react';
export function BaseLayout({children}) {
return (
<div>
{children ? children : "Some Generic Text"}
</div>
);
}
See https://github.com/ariakit/ariakit/discussions/1266#discussioncomment-2617748 for a solution and CodeSandbox that solves this problem well using the Constate library.
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.
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 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' />.
Trying to clean my React app up a little with Container and Presentation components. I'm using react-router v4 and I previously used an onClick event for each job to show a specific job page:
<div onClick={() => this.props.history.push('/jobs/' + job.slug)}>
//The job info
</div>
Now I've created a dumb component in a separate file for the jobs like this:
const Jobs = (props) => (
<div>
{
props.jobs.map(job =>
<div key={job.slug} onClick(//todo)>
<p>{job.title} at <Link to="/">{job.company}</Link></p>
</div>
)
}
</div>
)
but I can no longer access this.props.history
How can I solve this issue? Should I pass another prop in the following:
<Jobs jobs={jobs}/>
To access router objects(match, history and location) via props of the component, either the component has to be rendered via Route or it should wrap with withRouter higher-order component.
Check whether your Jobs component is directly rendered via Route with something like this.
<Route path="/jobs" component={Jobs} />
If it's not the case, and Jobs component is rendered with JSX inside the render method of another component, then wrap it with withRouter higher-order component as follows before you export it.
export default withRouter(Jobs);
This will ensure that Jobs component has access to all the router props.
Also, make sure that you use props.history instead of this.props.history since now it's functional component.