CODEWITHSUNDEEP
javascriptreactjs
Mark
Mark

Reputation: 1872

Direct way to add prop variable to React child component

So if I am creating a child component with varying props as shown in code below:

import React, { Component } from "react";
import {
  Container,
  Jumbotron,
  Button,
  Col,
  Row } from 'reactstrap';
import './jumbo.css';
import './index.css';


export const CustHero = () =>
  <Jumbotron className="customerView">
    <h1 className="display-3">{this.props.group} Customer Connection</h1>
    <p className="lead">{this.props.leadtext}</p>
  </Jumbotron>

  export const GenHero = () =>
  <Jumbotron className="generalView">
    <h1 className="display-3">{this.props.group} Customer Connection</h1>
    <p className="lead">{this.props.leadtext}</p>
  </Jumbotron>

And in one parent, I have:

<CustHero group="Immerse" leadtext="Help the Immerse team organize an onsite customer visit for you and your team" />

And then in another I have:

While in another I have:

<GenHero group="Immerse" leadtext="Help the Immerse team organize an onsite customer visit for you and your team" />

But my props get messed up so am assuming that since I am doing these as multiple const in one component then importing, I have to define the props elsewhere?

If I do it as one a piece, meaning one file for GenHero then another for CustHero, there is no issue with the const. What am I doing wrong here? Yes, I am looking at docs on this. I do it this way as I cannot have multiple export default per component. Am I missing how to map with this even though since I am not binding a function, but simple adding a styling element with some text based on the component the child is used in?

Addition:

And I get this after the first answer still. Still something with props:

enter image description here

Upvotes: 0

Views: 80

Answers (1)

Omar
Omar

Reputation: 3411

export const CustHero = (props) =>
  <Jumbotron className="customerView">
    <h1 className="display-3">{props.group && props.group} Customer Connection</h1>
    <p className="lead">{props.leadtext && props.leadtext}</p>
  </Jumbotron>

  export const GenHero = (props) =>
  <Jumbotron className="generalView">
    <h1 className="display-3">{props.group && props.group} Customer Connection</h1>
    <p className="lead">{props.leadtext && props.leadtext}</p>
  </Jumbotron>

Upvotes: 2

Related Questions