Stack Overflow
Stack Overflow

Questions tagged [react-tabs]

An accessible tab component for React.js.

A tab component for React.js.

Learn more:

62 questions
11
votes
6 answers

how to resolve "Prop `id` did not match. Server: "react-tabs-30" Client: "react-tabs-0" console issue?

i am trying tab in next in next.js, but every time i use it it show a console warning link this Prop `id` did not match. Server: "react-tabs-30" Client: "react-tabs-0", i know it isn't effect my app but it is so annoying. how to solve this…
Koushik Saha
  • 357
  • 1
  • 3
  • 11
5
votes
0 answers

How to render Symbol(react.element) to HTML

I'm new to React and I'm working with the react-table library. But I need to export the result as HTML. I've created a basic HTML structure and wanted to add the table, however it returns [object Object] and if I console.log the return value it logs…
Karolína Vyskočilová
  • 1,305
  • 1
  • 18
  • 29
3
votes
1 answer

How to create react tab navbar links with fragment identifiers (hash links)?

I have created a page with some tabs on it. Tab codes are these: const [ toggleState, setToggleState ] = useState(1); const toggleTab = (index) => { setToggleState(index); }
3
votes
0 answers

How to display and manipulate data of multiple Ag-Grids in React-Redux-Tabs in React.js

I am new to react- Ag-Grid and I want to display and manipulate multiple Ag-Grid in react tabs for displaying grids in tabs. I am using react-tabs-redux. Please refer to below url for it. https://www.npmjs.com/package/react-tabs-redux…
Jitu
  • 31
  • 2
2
votes
1 answer

react-table with filter and select column in the same table

I'm trying to use react-table 7.5 to have a table with search bar and select by rows features. I have the code of both search and select row separately, but I can't make it work together. This is my Table component: const Table = (...) => { const…
Santiago Tovar Ruiz
  • 21
  • 1
  • 2
2
votes
0 answers

How to fix React-tab issues

I am trying to implement react tabs in my Next.js applications. I have installed react tab packages and put the code but unfortunately, it doesn't work. When I click on title 1 it doesn't move any content 1 same as clicking title2. But the same…
Mir Rahat
  • 51
  • 1
  • 6
2
votes
0 answers

ContentEditable component inside a react tab component does not work when the value is cleared

I am trying to make the tab name editable. For example: In the case of the image above, I want the "office" to be editable. I am using the following…
Damini Ganesh
  • 288
  • 1
  • 10
2
votes
1 answer

Formik component not being rendered with react-tabs

I'm trying to use react-tabs with Formik but everytime i put the tag, nothing gets rendered. This is what i'm trying to do:
Editar lojista …
ncesar
  • 1,592
  • 2
  • 15
  • 34
2
votes
3 answers

Show content on tab click - React

I am really new to React and want to display 2 tabs, first tab click should display the canvas I have and second tab should display the dropdown. I have all the three in the page right now. My page looks like this - 2 tabs , one dropdown and one…
user3594118
  • 191
  • 3
  • 17
2
votes
1 answer

react-tabs not styled as tabs

Just trying to get a basic example of react-tabs working. The styling seems to be missing. The example below is in code sandbox (look in 'Hello.js'), but I see exactly the same behavior after installing the package into my project via npm. What am…
dt1000
  • 3,684
  • 6
  • 43
  • 65
1
vote
0 answers

White line appearing under selected tab title in react-tabs library

I'm using the react-tabs library and I have applied custom styling, but I'm facing an issue where a white line appears under the selected tab title when it is clicked. The strange thing is that the line disappears when I click somewhere else on the…
Rayaan R
  • 33
  • 5
1
vote
1 answer

Custom styling in react-tabs seems not working . Bottom border dissaperas as soons as the tab selected

I am using react-tabs (https://github.com/reactjs/react-tabs) for my project. I want to add custom styling on top of that. But the styles seems not working properly What is expected: Expected output - without issues What I get screen with the…
NIKO VITZ
  • 13
  • 3
1
vote
1 answer

Issue: Auto scroll to Top in react-native-collapsible-tab-view

I am using react-native-collapsible-tab-view in my sample project. I'm having auto scroll to top issue when :- reached to the bottom most item of flatlist and api returns the data and it set's to the setdata of the flatlist.this issue is only in…
MURARI Yadav
  • 240
  • 3
  • 11
1
vote
1 answer

React-Tabs and React-Selection: Tabs Steal Focus From Select

How can I prevent the autofocus problem after tab is clicked? For example, when I clicked the tab and I scrolled down to the different div with selection, I opened and chose the options from selection. The focus kept returning to the tab that I…
Jonah Winninghoff
  • 11
  • 1
1
vote
1 answer

When clicking on any other tabs, React tabs reset/clears all form input fields

I wanted to add tab menu so I decided to go with React Tabs. The following is how code is structured. The problem is when I click on tab 2, tab 1 form input gets reset/cleared. The same happens if I click on tab 3 all other tabs will get…
Kestal
  • 173
  • 1
  • 2
  • 10
1
2 3 4 5