Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

TopBarSelect types are broken

See original GitHub issue

Consider following code example

import { BarChartIcon, TableIcon, TopbarSelect } from "@operational/components"

const displayItems = [{ label: "Table", icon: TableIcon }, { label: "Bar Chart", icon: BarChartIcon }]

const [activeDisplay, setActiveDisplay] = React.useState<any>("Table")


It doesn’t work without any in React.useState

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:15 (15 by maintainers)

github_iconTop GitHub Comments

march213commented, Jun 27, 2019

Hi 👋🏻 Can I take this one too ?

stereoboostercommented, Jun 28, 2019

@march213 consider following code (standard React)

function App() {
  const [state, setState] = React.useState('mango');
  const onChange = React.useCallback((event) => setState(, [])

  return (
    <select value={state} onChange={onChange}>
      <option value="grapefruit">Grapefruit</option>
      <option value="lime">Lime</option>
      <option value="coconut">Coconut</option>
      <option value="mango">Mango</option>

React standard components have to deal with event, because they are building blocks. But in our case we can simplify API and onChange can be called with value directly instead of event. (Does it make sense so far?)

So we should be able to write something like this

const displayItems = [{ label: "Table", icon: TableIcon }, { label: "Bar Chart", icon: BarChartIcon }];
const [activeDisplay, setActiveDisplay] = React.useState("Table");


But our type system says that onChange can be called with ReactNode as well. Does it even make sense to have ReactNode provided to onChange? 🤔 How we gonna use ReactNode in state? (I mean generally we can, but we should not unless there is a specific reason for it).

So my idea is that onChange type signature should be (label: string) => void

Read more comments on GitHub >

github_iconTop Results From Across the Web

Troubleshooting Geo - GitLab Docs
Check if PostgreSQL replication is working. Check the health of the secondary site. On the primary site: On the top bar, select Main...
Read more >
What does: Error Broken count >0 mean? - Ask Ubuntu
Open a Terminal and type sudo apt-get upgrade . Check if you see an error similar to: E: dpkg was interrupted, you must...
Read more >
Create and follow up a payment plan in iController
There are two types of payment plans in iController: ... On the top bar select Clients; In the list select a debtor/client; On...
Read more >
QBSE Receipt Upload Failure - iOS 15 - QuickBooks - Intuit
Whatever broke a month and a half ago around the time iOS15 came out, ... From the top bar, select Assistant. Type Talk...
Read more >
Configuring EUC Scouts - ControlUp Support
In the Scoutbees top bar, select Create Scout to open the Add New Scout window. ... Select the type of Hive (Cloud or...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found