How we can update the state of button to logout after successfull login in react redux

Question

Here after successfull login im redirecting to homepage. How i can change that button to logout and when i again click on that logout button how can i again change again that button to login. Here is my codesandbox link. https://codesandbox.io/s/inspiring-rain-olm7wx?file=/src/components/Home.component.jsx:0-393

import React from "react";
import { useSelector } from "react-redux";

export default function Home() {
  // https://react-redux.js.org/api/hooks
  const isLogin = useSelector((state) => state.login.isLogin);
  console.log("isLogin ", isLogin);

  return (
    <>
      <div>This is homepage</div>
      <br />
      <a href="/login">
        <button> LOGIN</button>
      </a>
    </>
  );
}

Answer 1

You need to toggle the text using token field from your redux store. Essentially you need to modify your Home.jsx code like this:-

import React from "react";
import { useSelector, connect } from "react-redux";

const Home = (props) => {
  // https://react-redux.js.org/api/hooks
  const isLogin = useSelector((state) => state.login.isLogin);
  console.log("isLogin ", isLogin);

  return (
    <>
      <div>This is homepage</div>
      <br />
      <a href="/login">
        <button>{props.token ? "LOGOUT" : "LOGIN"}</button>
      </a>
    </>
  );
}

const mapStateToProps = (state) => {
  return {
    token: state.login.token
  };
};

export default connect(mapStateToProps)(Home);