Develop Reference

Rerendering components in React and Redux

I have a problem because my component keeps rerendering while I'm toggling it.
I have an arrow(up/down) that will show/hide a part of the div.
I wrote console.log('render') to see if its rerendering. I'm only toggling one div at a time but it is rerendering multiples times. How do I fix this?
CODESANDBOX --------> CODESANDBOX
const toggleArrow = (
<IconButton
aria-label="delete"
size="large"
onClick={() => {
handleProductCard(productIndex);
productCardRef.current.scrollIntoView({
behavior: "smooth"
});
}}
sx={{ padding: 0 }}
>
{formik.values.hideProductCard ? (
<KeyboardArrowDownIcon size="large" />
) : (
<KeyboardArrowUpIcon size="large" />
)}
</IconButton>
);

Slick Carousel removing bootstrap cards equal heights

I'm trying to do a products carousel with Slick and Bootstrap, but slick is removing Bootstrap nature of equalling heights as you can see in the screenshots:
https://imgur.com/QuzSIys ( without slick )
https://imgur.com/9P3sIJO ( with slick carousel )
Already tried a solution with JQuery and calcs but didn't work as expected, as shown in the next screenshots. ( I'm talking about this solution: Equal Height Bootstrap Cards within Slick Carousel )
https://imgur.com/RnlTaJr ( The height is so long and not in the bigger content max )
CAROUSEL CODE:
<Container className={'mt-2 mb-3'}>
<h3>{props.category}</h3>
<Row>
<Slider {...carouselSettings}>
{
products.map((product)=>{
return(
<Col className="col text-center">
<ProductCard title={product.title} description={product.description} image={product.image} />
</Col>
)
})
}
</Slider>
</Row>
</Container>
CARD COMPONENT CODE:
<Card className={'mh-100 h-100'}>
<div className={'wrapper'}>
<Card.Img className="img-fluid mh-100" variant="top" src={props.image} />
</div>
<Card.Body >
<Card.Title>{props.title}</Card.Title>
<Card.Text>
{props.description}
</Card.Text>
<Button variant="outline-primary" style={{marginRight: '10px'}}>Ver Mais</Button>
<Button variant="outline-success">Carrinho</Button>
</Card.Body>
</Card>
HOME CODE:
<>
<Header/>
<div className={'container mt-2'} style={{minHeight: 'calc(100vh - 380px)'}}>
<OffersCarousel/>
<ProductsCarousel category={'Lançamentos'}/>
</div>
<Footer/>
</>
Please any suggestion or fix to this or something that is not clear on this question tell me!

ScrollView Keeps Snapping to Top

I'm trying to create a scrollable screen for an iOS app using Native Base's ScrollView component but for some reason every time I try to scroll down the screen in snapped back to the top. My code looks something like this:
<NativeBaseProvider>
<ScrollView>
<VStack>
<Box height="25%" marginBottom="25%" bgColor="black"></Box>
<Box height="25%" marginBottom="25%" bgColor="black"></Box>
<Box height="25%" marginBottom="25%" bgColor="black"></Box>
<Box height="25%" marginBottom="25%" bgColor="black"></Box>
<Box height="25%" marginBottom="25%" bgColor="black"></Box>
<Box height="25%" marginBottom="25%" bgColor="black"></Box>
<Box height="25%" marginBottom="25%" bgColor="black"></Box>
</VStack>
</ScrollView>
<NavBar></NavBar>
</NativeBaseProvider>
For reference, NavBar is a custom component whose code is this:
<HStack bg={"white"} borderTopColor="gray.200" borderTopWidth={"1"} width={"100%"} height={"10%"} rounded="lg" space={"10%"} justifyContent={'center'} position={'absolute'} bottom={0} marginLeft={0} >
<Box>
<Button title="Go to Home" bg="white" flex = {"2"} height = {20} onPress={() => navigation.navigate('Home')}>
<Image source={require("./assets/NavBarIcon1.png")} alt="Home"></Image>
</Button>
</Box>
<Box>
<Button title="Go to Energy" bg="white" flex = {"1"} height = {20} onPress={() => navigation.navigate('Energy')}>
<Image source={require("./assets/NavBarIcon2.png")} alt="Energy"></Image>
</Button>
</Box>
<Box>
<Button title="Go to Reports" bg="white" flex = {"1"} height = {20} onPress={() => navigation.navigate('Reports')}>
<Image source={require("./assets/NavBarIcon3.png")} alt="Reports"></Image>
</Button>
</Box>
<Box>
<Button title="Go to Alarms" bg="white" flex = {"1"} height = {20} onPress={() => navigation.navigate('Alarms')}>
<Image source={require("./assets/NavBarIcon4.png")} alt="Alarms"></Image>
</Button>
</Box>
</HStack>
I have tried disabling snapToStart, which didn't work. Disabling bounces resulted in the scroll no longer working. Setting a height for the ScrollView, placing the ScrollView inside of a Box, and placing the contents inside of a Box did not work either. I am unsure what exactly is conflicting with the ScrollView. Is there some property I am missing or not setting up correctly? I just need the screen to scroll down and stay down so I can view all my content without rubber banding back to the top.

How do I resize and svg logo in react gatsby?

I have been trying to resize this logo without making the container itself larger. I'm completely stuck and dont know what to do. Modifying the logo svg file with inline styling
<svg viewBox="0 0 493.19 493.19" width='400'height='400'> produces the above result. I just want to make the logo bigger without pushing down all the components under it. I will post the layout code itself, if that will make things easier to help me out. Thank you!
const data: QueryResult = useStaticQuery(query)
return (
<ThemeProvider theme={theme}>
<>
<GlobalStyles />
<Wrapper>
<SideBarInner bg={color} as="aside" p={[6, 6, 8]}>
<Flex
flexWrap="nowrap"
flexDirection={['row', 'row', 'row', 'column']}
alignItems={['center', 'center', 'center', 'flex-start']}
justifyContent="space-between"
>
<Box width={['3rem', '4rem', '5rem', '8rem']}>
<Link to="/" aria-label="LekoArts, Back to Home">
<Logo />
</Link>
</Box>
<Nav
color={color}
mt={[0, 0, 0, 10]}
as="nav"
flexWrap="nowrap"
flexDirection={['row', 'row', 'row', 'column']}
alignItems="flex-start"
>
{data.navigation.nodes.map((item) => (
<PartialNavLink to={item.link} key={item.name}>
{item.name}
</PartialNavLink>
))}
</Nav>
</Flex>
</SideBarInner>
<Main>{children}</Main>
<Footer color={color}>
<Box p={[6, 6, 8]} fontSize={0}>
little things with love LekoArts.<br />
Source.
</Box>
</Footer>
</Wrapper>
</>
</ThemeProvider>
)
}
export default Layout```

The SVG viewBox dimensions don't change the size of the paths in the SVG, they change the size of the SVG object that contains the paths which results with that extra white-space.
I would undo the changes you made to the viewBox and remove the width and height inline styles. Then, the SVG should resize automatically to fit the container that it is in.

Try setting the width to 100% in the svg code and then control the size of svg with CSS (however you are implmenting css) by adjusting the width of the container that holds the svg.
Something like:
.sl-container {
width: 4rem;
}
EDIT:
If you need help implementing the css you can find a good explanation of numerous implmentations here. Inline styling is probably the simplest way to do it.
<Logo style="width: 4rem;" />

Material-UI AppBar Buttons jump to center of screen when page is refreshed

I have this Material-UI AppBar:
import React from 'react'
import AppBar from 'material-ui/AppBar'
import AccountCircle from 'material-ui-icons/AccountCircle'
import Toolbar from 'material-ui/Toolbar'
import IconButton from 'material-ui/IconButton'
import HomeIcon from 'material-ui-icons/Home'
import Button from 'material-ui/Button'
import auth from './../auth/auth-helper'
import {Link, withRouter} from 'react-router-dom'
const isActive = (history, path) => {
if (history.location.pathname == path)
return {color: '#c61054'}
else
return {color: '#ffffff'}
}
const Menu = withRouter(({history}) => (
<AppBar position="static">
<Toolbar>
<Link to="/">
<IconButton aria-label="Home" style={isActive(history, "/")}>
<HomeIcon/>
</IconButton>
</Link>
{
auth.isAuthenticated() && (<span style={{ marginLeft: "auto" }}>
<Link to="/issues">
<Button style={isActive(history, "/issues")}>Issues
</Button>
</Link>
<Link to="/users">
<Button style={isActive(history, "/users")}>Users
</Button>
</Link>
<Link to="/signup">
<Button style={isActive(history, "/signup")}>Create User
</Button>
</Link>
</span>)
}
{
!auth.isAuthenticated() && (<span style={{ marginLeft: "auto", marginRight: -12 }}>
<Link to="/signin">
<Button style={isActive(history, "/signin")}>Sign In
</Button>
</Link>
</span>)
}
{
auth.isAuthenticated() && (<span style={{ marginLeft: "auto", marginRight: -12 }}>
<Link to={"/user/" + auth.isAuthenticated().user._id}>
<IconButton aria-label="MyProfile" style={isActive(history, "/user/" + auth.isAuthenticated().user._id)}>
<AccountCircle/>
</IconButton>
</Link>
<Button color="inherit" onClick={() => {
auth.signout(() => history.push('/'))
}}>Sign Out</Button>
</span>)
}
</Toolbar>
</AppBar>
))
export default Menu
When logged out everything appears as expected. The Home icon is to the left and SIGNIN is to the right:
I then sign in and again, everything is as I would like. The Home icon, ISSUES, USERS and CREATE USER are to the left and the Profile icon and SIGNOUT are to the right:
If I then refresh the page, ISSUES, USERS and CREATE USER jump to the center of the page:
How do I stop this from happening? Should I try adding some condition to isActive to set this? Perhaps I could pass left or right in the function call and depending on which it is the style could be set on the button. Any thoughts on that?

To avoid this kind of positioning issues maybe you could create 2 spancontainers, one with the options on the left and another one with the options on the right. Then you can set display: flex; and justify-content:space-between; to their parent container (in this case, <Toolbar>), so both of the span will be on opposite sides. What do you think about it?

I think it is due to using the margin-left of "auto". You shouldn't need any margin on the authenticated span:
{
auth.isAuthenticated() && (<span>
<Link to="/issues">
// ...existing code
</Link>
</span>)
}
If you want to use margin to push the element to the left, I think it should be:
margin-right: "auto";