CODEWITHSUNDEEP
reactjs
Alwaysblue
Alwaysblue

Reputation: 11830

React Hooks not changing state or triggering re-render

So this is the first time I made a component using React Hooks

The code for the same is this 

import React, { useState } from 'react'


const TabManager = (props) => {
  const {tabsData} = props
  const [activeTabId, setActiveTabId] = useState(0)
  console.log(activeTabId, tabsData)
  const TabHandler = (currentTabId) => { 
   setActiveTabId(activeTabId)
  }

  return  (
  <div className="tabs">
    <div className="row">
      <div className="col-12 col-md-4 col-lg-4">
      {tabsData.map(tab => {
        return  (
        <div className="tab-names"
        key={tab.id}
        onClick={() => TabHandler(tab.id)}>
          {tab.name}
        </div>
        )
      })}
      </div>
      <div className="tab-content">
        <div className="col-12 col-md-8 col-lg-8">
          {tabsData.map(tab => {
            console.log(activeTabId)
              if (tab.id === activeTabId) {
                return (
                  <div className="active-tab-image"
                  key={tab.id}>
                    <p>  {tab.name} </p>
                    <img src={tab.imageUri} />
                  </div>
                )
              }}
            )}
        </div>
      </div>
    </div>
  </div>
  )
}

export default TabManager

This doesn't throw any error in the console but when I click on tab via this function 

 onClick={() => TabHandler(tab.id)}>

Either my state for activeHandler isn't changing or my component isn't being re-rendered.

Can someone help me in figuring out what i could be doing wrong?

Upvotes: 0

Views: 82

Answers (2)

Guruprasad
Guruprasad

Reputation: 783

You are not passing the correct argument of the function, you are passing activeTabId instead of currentTabId. Try this

const TabHandler = (currentTabId) => { 
   setActiveTabId(currentTabId)
  }

Upvotes: 1

Talgat Saribayev
Talgat Saribayev

Reputation: 1938

You have error in your code. In TabHandler change to setActiveTabId(currentTabId)

Upvotes: 0

Related Questions