组件的孩子没有出现

Question

I'm trying to build a Flip card with ReactJS, that have inside 2 others components which are : Frontside and BackSide. These components should have children such as BackgroundCard or Sectioned Card. When I test the component I'm not getting anything on the screen and there is no errors in the console!

FlipContent.js

function FlipContent() {
    const [setFront, setFrontState] = useState(true);
    const [setBack, setBackState] = useState(false);
    const [setFlipped, setFlippedState] = useState("");


    function FlippingCard() {

        setFrontState(setFront === true ? false : true);
        setBackState(setBack === false ? true : false);
        setFlippedState(setFlipped === "" ? "flipped" : "");

    }



    return (

        <div className={`flip-content ${setFlipped}`} onClick={FlippingCard} >
            <div className="flip-content-container" style={{ cursor: "pointer" }}>
                {setFront ? <FrontSide></FrontSide> : null}
                {setBack ? <BackSide> </BackSide> : null}
            </div>
        </div>
    );

}

And For the FrontSide/BackSide same this as this code

function FrontSide({ children }) {

    return (

        <div className="flip-content-front">
            <div style={{ cursor: "pointer" }}>
                {children}
            </div>
        </div>
    );

}

and here how I'm trying to preview the component

function FlipPreview() {
    return (
        <Column>
            <Row className={css(styles.title)} wrap flexGrow={1} horizontal="space-between" breakpoints={{ 768: 'column' }}>
                Accordion <br></br>
            </Row>
            <FlipContent>
                <FrontSide>
                    <CardBackgroundComponent title="Testing" image={image}></CardBackgroundComponent>
                </FrontSide>
                <BackSide>
                    <SectionedCardComponent
                        title="Notarum Black"
                        content="Powerful and reliable, this 15” HD laptop will not let you down. 256GB SSD storage, latest gen."
                        link=""
                        linkDescription="Add To Cart"
                    />
                </BackSide>
            </FlipContent>
        </Column>
    );
}

Answer 1

I think you have not inserted something inside both component FrontSide , BackSide

   <div className={`flip-content ${setFlipped}`} onClick={FlippingCard} >
      <div className="flip-content-container" style={{ cursor: "pointer" }}>
        {setFront ? <FrontSide> It's front side </FrontSide> : null}
        {setBack ? <BackSide> It's back-side </BackSide> : null}
       </div>
    </div>

Answer 2

So in your component you are not rendering children. So you need to update two things.

1) Taking the props in the FlipContent component as shown below

function FlipContent(props)

2) Use the props when rendering inside the component as shown below

 {setFront ? <FrontSide>{props.children}</FrontSide> : null}
  {setBack ? <BackSide>{props.children} </BackSide> : null} 

the problem is in second step is it will load all the props of children , so you need to render only the specific component. See the below one

Update

There are multiple ways to solve this one will list one by one

solution one

By using the name prop of the children

function FlipContent(props) {
  const [view, setView] = useState("FrontSide");
  function FlippingCard() {
    setView(view === "FrontSide" ? "BackSide" : "FrontSide");
  }

  const component = React.Children.map(props.children, child => {
    if (view === child.type.name) {
      return child;
    }
  });

  return (
    <div className={`flip-content`} onClick={FlippingCard}>
      <div className="flip-content-container" style={{ cursor: "pointer" }}>
        {component}
      </div>
    </div>
  );
}

Working codesandbox

Solution Two

Instead of adding statically the names can be driven from the prop, this can't handle same component multiple times

function FlipContent(props) {
  const [view, setView] = useState(props.children[0].type.name);
  const ref = useRef(0);
  function FlippingCard() {
    if (props.children.length - 1 === ref.current) {
      ref.current = 0;
      setView(props.children[0].type.name);
      return;
    }
    setView(props.children[ref.current + 1].type.name);
    ref.current += 1;
  }
  let component = <span />;
  React.Children.forEach(props.children, child => {
    if (view === child.type.name) {
      component = child;
      return;
    }
  });

  return (
    <div className={`flip-content`} onClick={FlippingCard}>
      <div className="flip-content-container" style={{ cursor: "pointer" }}>
        {component}
      </div>
    </div>
  );
}

Working codesandbox

Solution three

Rendering multiple components and in the same wrapper itself.

function FlipContent(props) {
  const [component, setComponent] = useState(props.children[0]);
  const ref = useRef(0);
  function FlippingCard() {
    if (props.children.length - 1 === ref.current) {
      ref.current = 0;
      setComponent(props.children[0]);
      return;
    }
    setComponent(props.children[ref.current + 1]);
    ref.current += 1;
  }

  return (
    <div className={`flip-content`} onClick={FlippingCard}>
      <div className="flip-content-container" style={{ cursor: "pointer" }}>
        {component}
      </div>
    </div>
  );
}

Working codesandbox

I feel solution three is the simplest one and you have the scalable way.