We Keep Coding

How to conditionally hide menu in Preact/Deno-Fresh

Im trying to get this mobile menu in preact/Deno-Fresh only to display when a button is clicked so setting a state of some kind to isHidden or isNotHidden. I've grown so used to angular with databinding {{somvalue}}. How do I set a conditional to be able to update when or when not to display this menu?
image here just a simple menu

Redux or simple React to handle navigation

I am very new to React and Redux and I am currently trying to wrap my head around how states are shared through the UI.
I have a pretty simple use case.
Picture a container with three columns:
A left Side Menu with four buttons
A central content section
A right container with some other content
When I click one of the four buttons I want three things to happen:
The class on the button is updated so it has borders
The class on the other buttons is updated so if they had been clicked before their border class is removed
The content in one part of the middle section is updated. This content requires data from the backend (Django Rest) to be fetched
Here are my questions:
Should I separate this interaction into a UI only concern and a Data driven one or handle both with a single state?
Because the buttons share a parent component but they do not with the central component, would I be better off using Redux if I do not want to define the state at the very top level of the Container?
Because I am new and Hooks seem to be the way to go I am trying to use hooks rather than classes, does it still make sense to separate components and containers?

You can use react-router-dom library to achieve want you want.
for your left side menu you can create active class in css and then check for current route with location.pathname property of react-router-dom and if it is for that button, active class set for it.
and for your main section you can fetch data in useEffect hook.
I think it is good to separate data and UI but for buttons what I say is good.
and you can store data in redux for your main section.

Navigate to a specific component (React)

I have a page 1 and a page 2. On page 1 is a specific component. On page 2 I have a button. After clicking on that button I want to navigate to the position of the specific component on page 1.
Is there a legit way to handle this?
By the way I am using GatsbyJS.

If you are using Gatsby, there is a plugin made for that :)
https://www.gatsbyjs.org/packages/gatsby-plugin-anchor-links/
Else you can just set an id on the component on page 2 and link with /page2#yourid

Create radio button style in ReactJS

I'm new to ReactJS and I really want to know what is the best practice for creating a Radio button style. Actually kinda like switching between tabs. For example, I have a layout like this one
When use click on each icon, it switches to its own tab.
I really want to know what is the best way to do instead of using pure radio button? Btw, the icon will have a image and div text inside of a div wrap. Thanks

The best way would be to have a component that is your tab controller. Then that component tracks which tab is selected, and will render the selected component

React Native FlatList won't render until I scroll

On my Main Screen I have some search parameters that an user can choose from, like brand and price. If I select any of them and press search it send the data to the Second Screen, to show the list, but It won't render until I scroll on it.
But if I search without setting any parameters it shows the list correctly. Since Im sending the parameters to another screen I thought it should re-render.
The same happens with my sort filters... When I'm on the list, if I select "sorte by price" it won't re-render until I scroll again... What am I doing wrong?
EDIT: im not alone: https://github.com/facebook/react-native/issues/13316
Setting removeClippedSubviews={false} fixes the initial search, but the sort filters are still not working.

I solved by using this on my FlatList: extraData={this.state} this way, FlatList knows it has to re-render.
It's in the docs.