CODEWITHSUNDEEP
reactjs
Ryan J N
Ryan J N

Reputation: 31

Pass a component as props

I have my card component, in which I need to pass another component into to display unique content for each different card. At the moment, I am passing the example component "Foot" in a ternary operator, but I also need to pass "Patio", "Fence" and "Deck", which relate to specific title props. I hope this all makes sense, here's my code -

import { useState } from "react";
import Foot from "../Footing";

const Card = (props) => {
  const [showContent, setShowContent] = useState(false);
  const contentClick = () => {
    setShowContent(true);
  };

  return (
    <div>
      <h1>{props.job}</h1>
      <button onClick={contentClick}>Calculate</button>
      {showContent && <Foot />}
      <hr></hr>
    </div>
  );
};

export default Card;

Upvotes: 0

Views: 704

Answers (1)

Shan
Shan

Reputation: 1568

You can pass the component as prop to Card. React will render the component only if its name is in Pascal case, so renaming the content prop to Content

Card

const Card = ({content:Content,job}) => {
  const [showContent, setShowContent] = useState(false);
  const contentClick = () => {
    setShowContent(true);
  };

  return (
    <div>
      <h1>{job}</h1>
      <button onClick={contentClick}>Calculate</button>
      {showContent && <Content />}
      <hr></hr>
    </div>
  );
};

Usage

import Foot from "../Footing";
<Card content={Foot}/>

If you want to pass title prop to the Foot component,

Card

const Card = ({content,job}) => {
  return
  <>
  {showContent && content}
  </>
}

Usage

import Foot from "../Footing";
<Card content={<Foot title='foot-title'/>}/>

Upvotes: 1

Related Questions