Trying to duplicate simple button component in react.js with different text/URL
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

Hi there!

So, I've got this static site built using Gatsby, a static site generator for React.js. You can see the live site that is synced to the GH repo.

I'm trying to do something super basic, but the way the button component is added in with conditional if/else statements is throwing me off. All I need to do is add a second button with separate button text and a separate URL directly to the right of the main button in the hero located in /src/components/hero.js as well as defined in the main homepage itself /src/pages/index.js.

You can see where I was trying to add two buttons beginning at line 13 of hero.js, which I'm able to add a second button. But I can't get the value of the buttonURL and the buttonText within the hero component to change.

I'm sure I'm just exhausted and missing something? Help?

awarded to kostasx

Crowdsource coding tasks.

1 Solution

Winning solution

For me, it worked with these changes:

index.js:

import React from 'react'
import Link from 'gatsby-link'

import BlogPosts from '../components/blog-posts'
import Hero from '../components/hero'

import {
    SkylineSVG,
    MonitorSVG,
    FolderSVG,
  } from '../components/svg-icons'

class IndexPage extends React.Component {
  render() {
    return (
      <div className="main">
        <Hero
          tagline="We envision a Coastal Georgia where human-centered, accessible government digital services and open data fuel community, inclusion, engagement, and efficiency."
          buttonText="Join Us"
          buttonURL="/contact/"
          button2Text="Join Us"
          button2URL="/contact/"
          />


        <div className="grid-container">
          <div className="grid-x grid-padding-x">
            <div className="cell">

              <h2>Information + Invitation = Participation</h2>

              <div className="grid-x grid-margin-x">
                <div className="cell large-auto">
                  <p className="lead">We are a Code for America brigade in Coastal Ga. We are a diverse mix of residents who believe that by applying the principles and practices of the web era to the delivery of government services, we can create more equitable communities that work better, faster, and cheaper.</p>
                </div>
                <div className="cell large-auto">

                  <div className="media-object">
                    <div className="media-object-section">
                      <MonitorSVG />
                    </div>
                    <div className="media-object-section">
                      <p className="header-medium">Bring civic data to life through interactive maps and visualizations</p>
                    </div>
                  </div>

                  <div className="media-object">
                    <div className="media-object-section">
                      <SkylineSVG />
                    </div>
                    <div className="media-object-section">
                      <p className="header-medium">Create tools to help Savannah residents better understand the built environment</p>
                    </div>
                  </div>

                  <div className="media-object">
                    <div className="media-object-section">
                      <FolderSVG />
                    </div>
                    <div className="media-object-section">
                      <p className="header-medium">Build simple web-based tools to streamline internal workflows</p>
                    </div>
                  </div>

                </div>
              </div>

              <div className="recent-posts-container">
                 <h2 className="header-xlarge">Recent blog posts <small style={{fontSize:"0.6em"}}><a href="https://medium.com/nycplanninglabs">See All (medium.com)</a></small></h2>
                 <BlogPosts />
              </div>


            </div>
          </div>
        </div>

      </div>
    )
  }
}

export default IndexPage

hero.js:

import React from 'react'
import Link from 'gatsby-link'


class Hero extends React.Component {
 render() {
   const title = this.props.title ? <h1 className="header-large">{ this.props.title }</h1> : null;

   const tagline = this.props.tagline ? <h2 className="header-xlarge">{ this.props.tagline }</h2> : null;

   let button = null;

   if (this.props.buttonText && this.props.buttonURL) {
     if (this.props.buttonURL.split('//')[1]) {
       button = <a href={ this.props.buttonURL } className="button large" target="_blank">Join Us</a>
     } else {
       button = <Link to={ this.props.buttonURL } className="button large">Learn more</Link>
     }
   }

   let button2 = null;

   if (this.props.button2Text && this.props.button2URL) {
     if (this.props.button2URL.split('//')[1]) {
       button2 = <a href={ this.props.button2URL } className="button large" target="_blank">Join Us</a>
     } else {
       button2 = <Link to={ this.props.button2URL } className="button large">{ this.props.button2Text }</Link>
     }
   }

   return <div className="hero">
     <div className="grid-container">
       <div className="grid-x grid-padding-x">
         <div className="cell">
          {title}
          {tagline}
          {button}
          {button2}

         </div>
       </div>
     </div>
   </div>
 }
}

export default Hero

Here are the lines that were appended to the files:

index.js: (lines added)

    button2Text="Second Button"
    button2URL="/custom/"

hero.js: (lines added)

   let button2 = null;

   if (this.props.button2Text && this.props.button2URL) {
     if (this.props.button2URL.split('//')[1]) {
       button2 = <a href={ this.props.button2URL } className="button large" target="_blank">Join Us</a>
     } else {
       button2 = <Link to={ this.props.button2URL } className="button large">{ this.props.button2Text }</Link>
     }
   }

...

    {button2}
Ahhh! Bingo. I was leaving out the let button = null; statements... just curious, what's the purpose of that? I've not come across that in React yet... brain dust.
paragon21 5 months ago
I can't really help you on that, since I am not experienced with React. :( Thanks for the tip.
kostasx 5 months ago