0

I think I need to use the tag parameter to allocate props to the Jumbotron but I don't understand the syntax given on the reactstrap components page.

    Jumbotron.propTypes = {
    // Pass in a Component to override default element
    tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
    fluid: PropTypes.bool,
    className: PropTypes.string
    };

My working code is 

    return (
       <div>
       <Container>
       <Jumbotron >
          <h1 className="display-3">{this.props.title}</h1>

and I am trying to pass back a prop to the Jumbotron to change it's height, and to change the background image dynamically from the calling component. Does anyone out there have a link that would help me get to the bottom of this? Failing that a code snippet would be much appreciated.

Thanks in advance.

David Poundall
  • 25
  • 7

2 Answers2

0

You can just pass style into your <Jumbotron> as normal. For example:

<Jumbotron style={{ backgroundColor: 'red', height: 200 }}>
  <h1 className="display-3">hey</h1>
</Jumbotron>

There's an example here.

Colin Ricardo
  • 16,488
  • 11
  • 47
  • 80
  • Double moustache. I have seen that before and obviously forgotten about it. Thank you. It worked fine with the height. Still looking for the syntax to define the image though. I will check your link - there may be a pointer there. – David Poundall Apr 27 '18 at 12:18
  • No Joy Colin. I tried this ... ... but it only succeeds in clearing the default picture that is defined in the css. Would you happen to know where I am going wrong with my syntax? – David Poundall Apr 27 '18 at 12:39
  • I even tried moving the image (and the css) into the same directory as the jsx file. Using this time with the correct close bracket. Still no joy on the image. – David Poundall Apr 27 '18 at 14:19
  • Yep, you just need to add a width as well, as you can see [here](https://stackblitz.com/edit/react-serrga). – Colin Ricardo Apr 27 '18 at 14:30
  • I can get it to work with http links as per the code snippet you pointed me to. It doesn't work with relative links though. But I am not too bothered about that - what I am really after is something like this. .... backgroundImage: (this.props.imageChosen) .... where this.props.imageChosen="url('./images/balloon01.jpg')" in a calling component. – David Poundall Apr 27 '18 at 15:01
  • BTW I tried this ... backgroundImage: "url('./images/balloon01.jpg')" ... but no joy. Is there a bug here or is it me? – David Poundall Apr 27 '18 at 15:02
  • I think you need `url(require(foo))` – Colin Ricardo Apr 27 '18 at 15:45
  • neither backgroundImage: url(require('../images/balloon01.jpg')), or backgroundImage: "url(require('../images/balloon01.jpg'))", worked. On the former I had to import url from 'url' as well. – David Poundall Apr 27 '18 at 15:55
  • Thanks for hanging in there Colin. It is very much appreciated. This sod has been a thorn in my side for the last two days. – David Poundall Apr 27 '18 at 15:57
  • Hmm, that's strange. Are you using CRA, and are you sure the relative path is right? – Colin Ricardo Apr 27 '18 at 16:16
  • II am pretty sure the links are correct. However I did move everything (the .css, the component .jsx and the image into the same folder and used './balloon01.jpg' as the link string just to be sure. – David Poundall Apr 27 '18 at 16:19
  • I can't understand why the http link works but the same syntax doesn't work for local links. – David Poundall Apr 27 '18 at 16:20
  • Tried that. The jumbotron acts more nicely as it shows the .css initial image rather than nothing - but still no link to the required image. – David Poundall Apr 27 '18 at 16:22
  • Not sure what you mean by the acronym CRA? Ahh - yes just checked it out. Yes I am. – David Poundall Apr 27 '18 at 16:24
  • Create React App – Colin Ricardo Apr 27 '18 at 16:24
  • That makes perfect sense. However when I try it the ${image} element is in effect commented out rather than escaped. Do I need to install jquery? – David Poundall Apr 27 '18 at 16:34
  • Make sure you're using template literals, e.g. with backticks. It's not jQuery, it's ES6 syntax for string interpolation. – Colin Ricardo Apr 27 '18 at 16:35
  • Bugger :) job done - you are a star. But in the css you don't need backticks? Syntax will be the death of me. All working now. probably would have been all working a few lines ago if I had used backticks. I will explore that. If I could I would give you many many plusses for that but I do not have enough quedos on the system so you will just have to accept my greateful thanks. – David Poundall Apr 27 '18 at 16:41
  • Scratch that - there are no backticks in the .css file. You have to be so careful with all of these different rules. – David Poundall Apr 27 '18 at 16:44
  • Yes, it's different syntax for CSS! Glad I could help. It if worked for you, please mark the answer as correct :) – Colin Ricardo Apr 27 '18 at 16:47
0

The final code needed a require() to provide the correct pointer to the background image of the jumbotron. The require could not be in the component itself because passing props into the require at component level gave a webpack error. Instead the require() had to be in the calling component as the argument had to be pure string. The final code for the component and the calling element are as follows.

Click here to show the complete reactstrap Jumbotron component with props

Click here to see the calling element configuration

David Poundall
  • 25
  • 7