How to switch component showing with React and CSS?

I have a composed page with multiple components. Like the picture, I want to show Component B inside Component A. By default, when clicking on A, hide B and show C in the middle. After clicking again, it toggles to show B and hide C.

When C has been showing, also change the A’s border color.

import React from "react";
import styled, { css } from "styled-components";

import {
  ComponentA,
  ComponentB,
  ComponentC,
} from "~/components";

export const NewComponent: React.FC = ({
}) => {
  return (
    <>
      <ComponentA>
        <ComponentB>B</ComponentB>
        <ComponentC>C</ComponentC>
      </ComponentA>
    </>
  );
};

const ComponentA = styled()`
  ${({ theme }) => css`
    &:active {
      border-color: green;
      bordor: 1px solid;
    }
  `}
`;

I tried to use CSS to control the border color, it works with background-color but does not work for border-color. Also, I’m not sure if CSS can control the showing between Component B and component C.

Answer

To switch the components you need to use the useState hook with a boolean state. Then add an event onClick on the ComponentA and you can toggle state with the hook.

This way you can handle the border color switching. Create an attribute for ComponentA (you can chose name yourself ) you can pass values as a props, and using Ternary Operator toggle the color.

PS: If you don’t use typescript, you can remove this line <{ color: "green" | "white" }> for ComponentA.

import { useState } from "react";
import styled from "styled-components";

export const ComponentA = styled.div<{ color: "green" | "white" }>`
  padding: 3rem 7rem;
  border: 2px solid ${(props) => props.color};
  border-radius: 0.5rem;
`;

const DefaultStyle = styled.div`
  max-width: 300px;
  padding: 3rem;
  border-radius: 0.5rem;
`;
export const ComponentB = styled(DefaultStyle)`
  background-color: magenta;
`;
export const ComponentC = styled(DefaultStyle)`
  background-color: orange;
`;

export default function App() {
  const [isActive, setIsActive] = useState(false);

  const toggle = () => setIsActive(!isActive);

  return (
    <div className="App">
      <ComponentA color={isActive ? "green" : "white"} onClick={toggle}>
        {isActive ? (
          <ComponentC>Component C</ComponentC>
        ) : (
          <ComponentB>Component B</ComponentB>
        )}
      </ComponentA>
    </div>
  );
}