How to switch component showing with React and CSS?

Question

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.

Anton · Accepted Answer · 2022-07-26 10:57:25Z

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>
  );
}

Sakibul Anwar · Accepted Answer · 2022-07-26 07:25:00Z

1

import {useState} from "react";

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

export const NewComponent: React.FC = ({
}) => {   

 const [isShowing, setIsShowing] = useState<boolean>(true);
            
              const toggle = () => {
                setIsShowing(current => !current);
              };
            
              return (
      <>
          <ComponentA>
                <div>
                  <button onClick={toggle}>Toggle</button>
                  {isShowing &&  <ComponentB>B</ComponentB>} // if true
                  {!isShowing && <ComponentC>C</ComponentC>} // if false
                </div>
     
          </ComponentA> </>
    
    )
}

answered Jul 26, 2022 at 7:25

Sakibul Anwar

943 bronze badges

1 Comment

Alpin Cleopatra Over a year ago

Thank you. This way is awesome. I just need to move the button onclick event to ComponentA. For A's border color. Is there a good solution? Maybe CSS' active doesn't support border-color.

Đỗ văn Thắng · Accepted Answer · 2022-07-26 07:49:02Z

1

bordor - you wrote it wrong. It's border
When you set border: 1px solid; then border-color: initial

You can set CSS: border: 1px solid green;

answered Jul 26, 2022 at 7:49

Đỗ văn Thắng

1858 bronze badges

Collectives™ on Stack Overflow

How to switch component showing with React and CSS?

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related