Change <svg> height using passed data and spring - reactjs

Question

I'm React beginner. I tried and searched hours but I still don't get it.
I got (props) from App.js as a boolean. Pressed button or not.
I want:
If false, I want to change svg height to 300px, else to 20px. it should be animated. How to bind animation with spring?
Should I make const like navAnimation?
this is App.js
import React, { Component, useState } from 'react';
import {useSpring, animated} from 'react-spring';
import Subject from "./components/Subject";
import Nav from "./components/Nav";
import Sidebar from "./components/Sidebar";
import './components/event.js';
const App = () => {
const [isNavOpen, setNavOpen] = useState(false);
const navAnimation = useSpring({
height : isNavOpen ? 0 : 50,
opacity : isNavOpen ? 0 : 1
})
return(
<div className="App">
<div className="sidebar">
<Sidebar isOpen={isNavOpen} />
<button onClick={() => setNavOpen(!isNavOpen)}>open</button>
</div>
<div className="main">
<Subject />
<Nav style={navAnimation} />
</div>
</div>
);
}
export default App;
and this is Sidebar.js
const Sidebar = (props) => {
return(
<div id="sidebar">
lorem ipsum
<svg width="300" height="300">
<rect width="10vh" height="20" x="10" y="10" />
</svg>
</div>
);
}
export default Sidebar;

Answer 1

If you want to change between two values based on a boolean, a ternary can be used.
boolean ? ValueIfTrue : ValueIfFalse
You can embed expressions in jsx with curly braces. Based on the name of the prop key, the height will be set to 300 or 20. I would recommend setting some kind of unit rather than just 300, i.e. 300px.
Good luck with the rest of what you are building
const Sidebar = (props) => {
return(
<div id="sidebar">
lorem ipsum
<svg width="300" height={this.props.keyFromApp ? "300": "20"}>
<rect width="10vh" height="20" x="10" y="10" />
</svg>
</div>
);
}
Finally you need to make sure the child rerenders when the parents values change. Currently the parents variables aren't states. This means that if a parents variables change no rerendering of the child components
const App = () => {
const [isNavOpen, setNavOpen] = useState(true);
const navAnimation = useSpring({
height : isNavOpen ? 0 : 50,
opacity : isNavOpen ? 0 : 1