How to toggle tabPane content on click in react

Question

I have a App in React. This App has two tabs in the first tab i am showing the list of chated users and in the second tab i am showing all the registerd contacts. Tabs are working as expected . Now my question is when the users is in second tab ,if he clicks on any user .It should show the chat tab. I am using this npm package for creating the tabs react-tabs .

// chatsection.js :parent component of chated componenent and registerd contacts

import React, { useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import "./Style.css";
import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
import "react-tabs/style/react-tabs.css";
import Allcontacts from "./Allcontacts";
import ChatedList from "./ChatedList";
import { setTabPane } from "./actions";
import "./Style.css";
const ChatSection = (props) => {
  const dispatch = useDispatch();
  const tab = useSelector((state) => state.tab);
  console.log("tab", tab);
  return (
    <div className="">
      <Tabs>
        <TabList style={{ display: "flex" }}>
          <Tab
            onClick={() => dispatch(setTabPane("chat"))}
            className={` ${tab === "chat" ? "abc" : "1"}`}
          >
            Chats
          </Tab>
          <Tab
            onClick={() => dispatch(setTabPane("contact"))}
            className={` ${tab === "contact" ? "abc" : "1"}`}
          >
            Allcontacts
          </Tab>
        </TabList>

        <TabPanel>
          <ChatedList />
        </TabPanel>
        <TabPanel>
          <Allcontacts />
        </TabPanel>
      </Tabs>
    </div>
  );
};

export default ChatSection;

//chated.js

import React, { useEffect, useState } from "react";
import axios from "axios";
import ShowSingle from "./ShowSingle";
function ChatedList() {
  const [users, setUsers] = useState();
  const [loading, setLoading] = useState(true);
  useEffect(() => {
    axios
      .get("http://localhost:3005/")
      .then(function (response) {
        setUsers(response.data);
        console.log("users" + JSON.stringify(response.data));
        setLoading(false);
      })
      .catch(function (error) {
        console.log(error);
        setLoading(false);
      });
  }, []);
  return (
    <div>
      {!loading && users.map((user, id) => <ShowSingle key={id} user={user} />)}
    </div>
  );
}
export default ChatedList;

** //Allcontacts.js

import React, { useEffect, useState } from "react";
import "./All.css";
import ShowSingle from "./ShowSingle";
import axios from "axios";
import { useDispatch } from "react-redux";
import { setTabPane } from "./actions";
function Allcontacts() {
  const dispatch = useDispatch();

  const [users, setUsers] = useState();
  const [loading, setLoading] = useState(true);
  useEffect(() => {
    axios
      .get("http://localhost:3005/all")
      .then(function (response) {
        setUsers(response.data);
        console.log("users" + JSON.stringify(response.data));
        setLoading(false);
      })
      .catch(function (error) {
        console.log(error);
        setLoading(false);
      });
  }, []);
  const clickHandler = () => {
    dispatch(setTabPane("chat"));
  };
  return (
    <div>
      {!loading &&
        users.map((user, id) => (
          <ShowSingle key={id} user={user} click={clickHandler} />
        ))}
    </div>
  );
}

    export default Allcontacts;
    import React, { useEffect, useState } from "react";
    import "./All.css";
    import ShowSingle from "./ShowSingle";
    import axios from "axios";
    import { useDispatch } from "react-redux";
    import { setTabPane } from "./actions";
    function Allcontacts() {
      const dispatch = useDispatch();
    
      const [users, setUsers] = useState();
      const [loading, setLoading] = useState(true);
      useEffect(() => {
        axios
          .get("http://localhost:3005/all")
          .then(function (response) {
            setUsers(response.data);
            console.log("users" + JSON.stringify(response.data));
            setLoading(false);
          })
          .catch(function (error) {
            console.log(error);
            setLoading(false);
          });
      }, []);
      const clickHandler = () => {
        dispatch(setTabPane("chat"));
      };
      return (
        <div>
          {!loading &&
            users.map((user, id) => (
              <ShowSingle key={id} user={user} click={clickHandler} />
            ))}
        </div>
      );
    }
    
    export default Allcontacts;

//showing single users

import React from "react";

function ShowSingle({ user, click }) {
  return (
    <div className="wrapper">
      <ul>
        <li onClick={click}>{user.name}</li>
      </ul>
    </div>
  );
}

export default ShowSingle;

I wonder how your tab selection works. I can't see ` setTabIndex(index)}>` something similar to this !! — Sanish Joseph, Sep 09 '21 at 04:49

score 0 · Answer 1 · answered Sep 09 '21 at 04:48

Checkout https://github.com/reactjs/react-tabs#selectedindex-number

<Tabs defaultIndex={1} onSelect={index => console.log(index)}>
  <TabList>
    <Tab>Title 1</Tab>
    <Tab>Title 2</Tab>
  </TabList>
  <TabPanel></TabPanel>
  <TabPanel></TabPanel>
</Tabs>

How to toggle tabPane content on click in react

1 Answers1