Develop Reference

React Framer-motion AnimatePresence exit animation does not work

I am trying to animate some page transitions, but for some reason only the entering animation works.
The text slides in properly, but it does not slide out when routing to another component, it just disappears instead. I have tried assigning the keys to individual components using location.pathname and also to the Outlet component, adding exitBeforeEnter in AnimatePresence and mode="wait", so i have no idea what else could be wrong.
The main component:
import React from "react";
import Navbar from './navbar.js';
import { Outlet } from "react-router-dom"
import { AnimatePresence } from "framer-motion"
export default function App() {
return (
<div>
<Navbar/>
<AnimatePresence>
<Outlet/>
</AnimatePresence>
</div>
);
}
The pages look like this:
import React from 'react';
import './index.css'
import { motion } from "framer-motion"
import { useLocation } from 'react-router-dom';
export default function Section1() {
let location = useLocation()
return (
<motion.p
key={location.pathname}
transition={{duration: 0.8, ease: "easeOut"}}
initial={{ x: "-100%", opacity: 0 }}
animate={{ x: 0, opacity: 1 }}
exit={{ x: "100%", opacity: 0 }} className='text-center text-6xl my-56'>Section 1</motion.p>
)
}
Navbar:
import React from "react"
import { Link } from "react-router-dom";
export default function Navbar(router) {
return (
<nav className='bg-gray-300 flex items-center justify-between'>
<p className="ml-6 text-3xl">Варвара Алексеева</p>
<ul className='flex flex-row justify-end mr-20 text-xl'>
<li className='m-4'><Link to={"/"} className='hover:bg-lapis hover:text-white p-2 rounded-xl duration-300'>Main</Link></li>
<li className='m-4'><Link to={"/section1"} className='hover:bg-lapis hover:text-white p-2 rounded-xl duration-300'>Section 1</Link></li>
<li className='m-4'><Link to={"/section2"} className='hover:bg-lapis hover:text-white p-2 rounded-xl duration-300'>Section-2 2</Link></li>
<li className='m-4'><Link to={"/section3"} className='hover:bg-lapis hover:text-white p-2 rounded-xl duration-300'>Section 3</Link></li>
</ul>
</nav>
)
}

While there does not seem to be official guides about this, I think the reason could be Outlet wraps the elements for nested routes with another component (Provider), causing AnimatePresence unable to work, since these elements are no longer direct children of it.
As an experimental solution, the exit animation seems to work by using useOutlet to manually render the nested routes, and pass a unique key with cloneElement to the element for the route.
Live demo of the experiment: stackblitz (omitted styles for simplicity)
import { useLocation, useOutlet } from 'react-router-dom';
import { AnimatePresence } from "framer-motion"
export default function App() {
const { pathname } = useLocation();
const element = useOutlet();
return (
<div className="App">
<Navbar />
<AnimatePresence mode="wait">
{element && React.cloneElement(element, { key: pathname })}
</AnimatePresence>
</div>
);
}

How do I change the innerHTML of an element using React?

I want to change innerHTML of a div, when I click on the button. I don't know why, but instead of getting an error, or getting the expected result it deletes to content and replacing it with "[object Object]".
How can I get it work?
import React from 'react';
import Login from './components/login.js';
import SignIn from './components/signin';
import './App.css';
function App() {
function LoginOnClick(){
document.getElementById("wrapper").innerHTML = <SignIn />;
}
return (
<div className="container" id="wrapper">
<button onClick={LoginOnClick}>Login</button>
<Login />
</div>
);
}
export default App;

You can make use of Hooks (Added n React 16.8).
import React, {useState} from 'react';
import Login from './components/login.js';
import SignIn from './components/signin';
import './App.css';
function App() {
const [signIn, setSignIn] = useState(false);
return (
<div className="container" id="wrapper">
{signIn ? <SignIn /> : <> //This is React Fragments syntax
<button onClick={() => setSignIn(true)}>Login</button>
<Login />
</>
}
</div>
);
}
export default App;

With react you don’t have to set the innerHtml to do this, instead the more typical way is to have internal state in your component and conditionally render your SignIn component based off that. To use state the component either needs to be class or use hooks, classes are more traditional so I changed the component to be a class.
To make a class a react component you need to extend the class with the React.Component, this is because react components have lots of internal behaviours that you need to include with your class for it to be considered a component.
So
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
signIn: false,
};
this.LoginOnClick = () => {
this.setState({ signIn: true });
};
}
render() {
if (this.state.signIn) {
return (
<div className="container">
<SignIn />
</div>
);
}
return (
<div className=“container”>
<button onClick={this.LoginOnClick}>Login</button>
<Login />
</div>
);
}
}

Here is a simple way to do it:
import {useState} from "react";
const App = () => {
const [txt, setTxt] = useState("");
setTxt(<p> 'Lorem ipsum dummy text blabla.' </p>);
return(
<div>
{txt}
</div>
)
}
export default App;

React Pass Image URL to child component

I'm trying to render a different background image for a child component depending on the URL that is passed through props.
The background images are stored in the public folder under a file called images
public/images/bg_1.jpg
Current I have this:
Parent component
import React from "react";
import Nav from "./Nav";
import SubNav from "./SubNav";
import Footer from "./Footer";
import PageHero from "./PageHero";
import backgroundImage from '../../public/images/bg_1.jpg';
const MainPage = () => (
<div>
<Nav />
<SubNav company="Main Company" />
<PageHero BackgroundURL={backgroundImage}/>
<Footer />
</div>
);
export default MainPage;
Child component (PageHero)
import React from "react";
export class PageHero extends React.Component {
render(props) {
return (
<div>
<div
class="page-hero uk-light"
style={{ backgroundImage: `url(${props.BackgroundURL})` }}
>
<div class="uk-container uk-container-medium uk-text-center">
<h1 class="uk-heading-primary page-hero__header uk-animation-fade">
Page Heder
</h1>
</div>
</div>
</div>
);
}
}
export default PageHero;
But I get this error when I try to link the src:
ERROR in ./public/images/bg_1.jpg
You may need an appropriate loader to handle this file type.
is this possibly an issue with webpack or the way I'm referencing the image?

Import'd React.Component not rendering with Typescript

In App.tsx I'm importing CounterComponent.tsx , the import works if CounterComponent is exporting a function but not a React class.
Here is the commit if you want to clone/reproduce: https://github.com/Falieson/react15-meteor1.5/commit/d06ebc80c4b75850338c9a2cf11cf3ec49cafa40
Thank you for your help
App.tsx
import * as React from 'react';
import Counter from './counter/CounterComponent'
const App = (
<div className='app-container'>
{Counter}
</div>
)
export default App
CounterComponent.tsx
import * as React from 'react'
class CounterModule extends React.Component<{}, {}> {
public render() {
return (
<div>
Counter Module Placeholder
</div>
)
}
}
export default CounterModule

In React you should use <Element /> when you want to render some element. So change
const App = (
<div className='app-container'>
{Counter}
</div>
)
to
const App = (
<div className='app-container'>
<Counter/>
</div>
)

React componet should be written as a pure function

Here is my ReactJs component code:
import React from 'react';
class App extends React.Component {
render() {
return (
<div className="wrapper">
<h1>Welcome to App!!!!</h1>
</div>
);
}
}
export default App;
Linting is showing me the following error:
error Component should be written as a pure function react/prefer-stateless-function
How to write that as a pure function to avoid this error ?

Like this:
import React from 'react';
const App = () => {
return (
<div className="wrapper">
<h1>Welcome to App!!!!</h1>
</div>
);
}
export default App;
Components that do not need to keep state are called "stateless", and are usually considered best practice to use unless you need to keep state.

A simple function will suffice, you don't need an entire class (that should be only used for stateful components). You can reduce the code to
import React from 'react';
export default const App = () => (
<div className="wrapper">
<h1>Welcome to App!!!!</h1>
</div>
);
or
import React from 'react';
export default function App() {
return (
<div className="wrapper">
<h1>Welcome to App!!!!</h1>
</div>
);
}

Write it like this:
import React from 'react';
var App = () => {
return (
<div className="wrapper">
<h1>Welcome to App!!!!</h1>
</div>
);
}
export default App;
Reason is: You are not using an state or any lifecycle method in this, so you can make it as Pure Function. It is basically know as Stateless Functional Component.
Check the doc for more details.

import React from 'react';
const App = (props) => (
<div className="wrapper">
<h1>Welcome to App!!!!</h1>
</div>
);
export default App;