Custom Jumbotron for each page

Question

I am trying to make my Jumbotron specific for the page. So I created user type array in my App.js and at the same time I sent types as props on this page:

const userTypes = {
    individual: [
      {
        _id: '1',
        name: 'Individual',
        quote: 'Download the app to track your code',
      },
    ],
    broker: [
      {
        _id: '2',
        name: 'Broker',
        quote: 'Download the app to see all the drivers',
      },
    ],
    dealer: [
      {
        _id: '3',
        name: 'Dealer',
        quote: 'Download the app to do something else',
      }
    ],
  };
<Route exact path="/" component={Home} id={userTypes.individual._id} type={userTypes.individual.type} quote={userTypes.individual.quote}/>
          <Route exact path="/brokers" component={Broker} id={userTypes.broker._id} type={userTypes.broker.type} quote={userTypes.broker.quote}/>
          <Route exact path="/dealers" component={Dealer} id={userTypes.dealer._id} type={userTypes.dealer.type} quote={userTypes.dealer.quote}/>

So what I am trying to do is display quote property on Home, Broker and Dealer pages. For example, in Home page I am sending properties as props, so this is my Home page:

function Home(props) {  
  const history = useHistory();  
    return (
  <Styles>
    <JumbotronClassic history={history} props={props}/>
      
  </Styles>
);
}

export default Home;

So according to the props here, I am expecting to see quote in Jumbotron because here is my Jumbotron:

const JumbotronClassic = (props) => {
  return (
    <div>
      <Jumbotron fluid>
        <Container fluid>
          <Row>
            <Col>{props.quote}</Col>
            <Col>
              <InstantQuote />
            </Col>
          </Row>
        </Container>
      </Jumbotron>
    </div>
  );
};

But unfortunately, I dont see anything as I expecting. So I am guessing I am doing something wrong when I send props. Could you please check and let me know what I did wrong?

Answer 1

That's because id, type, and quote are being passed to the Route component, rather than the component specified in your component prop. If your Route component is a react-router-dom component, then use the render prop instead.

e.g.

<Route
  exact
  path="/"
  render={props => <Home {...props} id={userTypes.individual._id} type={userTypes.individual.type} quote={userTypes.individual.quote} />}
/>