kostasx's solution to "Trying to duplicate simple button component in react.js with different text/URL"

For me, it worked with these changes:<\/p>\n\n

index.js:<\/p>\n

import<\/span> React<\/span> from<\/span> 'react'<\/span>\nimport<\/span> Link<\/span> from<\/span> 'gatsby-link'<\/span>\n\nimport<\/span> BlogPosts<\/span> from<\/span> '../components/blog-posts'<\/span>\nimport<\/span> Hero<\/span> from<\/span> '../components/hero'<\/span>\n\nimport<\/span> {<\/span>\n    SkylineSVG<\/span>,<\/span>\n    MonitorSVG<\/span>,<\/span>\n    FolderSVG<\/span>,<\/span>\n  }<\/span> from<\/span> '../components/svg-icons'<\/span>\n\nclass<\/span> IndexPage<\/span> extends<\/span> React<\/span>.<\/span>Component<\/span> {<\/span>\n  render<\/span>()<\/span> {<\/span>\n    return<\/span> (<\/span>\n      <<\/span>div<\/span> className<\/span>=&<\/span>quot<\/span>;<\/span>main<\/span>&<\/span>quot<\/span>;<\/span>><\/span>\n        <<\/span>Hero<\/span>\n          tagline<\/span>=&<\/span>quot<\/span>;<\/span>We<\/span> envision<\/span> a<\/span> Coastal<\/span> Georgia<\/span> where<\/span> human<\/span>-<\/span>centered<\/span>,<\/span> accessible<\/span> government<\/span> digital<\/span> services<\/span> and<\/span> open<\/span> data<\/span> fuel<\/span> community<\/span>,<\/span> inclusion<\/span>,<\/span> engagement<\/span>,<\/span> and<\/span> efficiency<\/span>.&<\/span>quot<\/span>;<\/span>\n          buttonText<\/span>=&<\/span>quot<\/span>;<\/span>Join<\/span> Us<\/span>&<\/span>quot<\/span>;<\/span>\n          buttonURL<\/span>=&<\/span>quot<\/span>;<\/span>/<\/span>contact<\/span>/&<\/span>quot<\/span>;<\/span>\n          button2Text<\/span>=&<\/span>quot<\/span>;<\/span>Join<\/span> Us<\/span>&<\/span>quot<\/span>;<\/span>\n          button2URL<\/span>=&<\/span>quot<\/span>;<\/span>/<\/span>contact<\/span>/&<\/span>quot<\/span>;<\/span>\n          /><\/span>\n\n\n        <<\/span>div<\/span> className<\/span>=&<\/span>quot<\/span>;<\/span>grid<\/span>-<\/span>container<\/span>&<\/span>quot<\/span>;<\/span>><\/span>\n          <<\/span>div<\/span> className<\/span>=&<\/span>quot<\/span>;<\/span>grid<\/span>-<\/span>x<\/span> grid<\/span>-<\/span>padding<\/span>-<\/span>x<\/span>&<\/span>quot<\/span>;<\/span>><\/span>\n            <<\/span>div<\/span> className<\/span>=&<\/span>quot<\/span>;<\/span>cell<\/span>&<\/span>quot<\/span>;<\/span>><\/span>\n\n              <<\/span>h2<\/span>><\/span>Information<\/span> +<\/span> Invitation<\/span> =<\/span> Participation<\/span></<\/span>h2<\/span>><\/span>\n\n              <<\/span>div<\/span> className<\/span>=&<\/span>quot<\/span>;<\/span>grid<\/span>-<\/span>x<\/span> grid<\/span>-<\/span>margin<\/span>-<\/span>x<\/span>&<\/span>quot<\/span>;<\/span>><\/span>\n                <<\/span>div<\/span> className<\/span>=&<\/span>quot<\/span>;<\/span>cell<\/span> large<\/span>-<\/span>auto<\/span>&<\/span>quot<\/span>;<\/span>><\/span>\n                  <<\/span>p<\/span> className<\/span>=&<\/span>quot<\/span>;<\/span>lead<\/span>&<\/span>quot<\/span>;<\/span>><\/span>We<\/span> are<\/span> a<\/span> Code<\/span> for<\/span> America<\/span> brigade<\/span> in<\/span> Coastal<\/span> Ga<\/span>.<\/span> We<\/span> are<\/span> a<\/span> diverse<\/span> mix<\/span> of<\/span> residents<\/span> who<\/span> believe<\/span> that<\/span> by<\/span> applying<\/span> the<\/span> principles<\/span> and<\/span> practices<\/span> of<\/span> the<\/span> web<\/span> era<\/span> to<\/span> the<\/span> delivery<\/span> of<\/span> government<\/span> services<\/span>,<\/span> we<\/span> can<\/span> create<\/span> more<\/span> equitable<\/span> communities<\/span> that<\/span> work<\/span> better<\/span>,<\/span> faster<\/span>,<\/span> and<\/span> cheaper<\/span>.</<\/span>p<\/span>><\/span>\n                </<\/span>div<\/span>><\/span>\n                <<\/span>div<\/span> className<\/span>=&<\/span>quot<\/span>;<\/span>cell<\/span> large<\/span>-<\/span>auto<\/span>&<\/span>quot<\/span>;<\/span>><\/span>\n\n                  <<\/span>div<\/span> className<\/span>=&<\/span>quot<\/span>;<\/span>media<\/span>-<\/span>object<\/span>&<\/span>quot<\/span>;<\/span>><\/span>\n                    <<\/span>div<\/span> className<\/span>=&<\/span>quot<\/span>;<\/span>media<\/span>-<\/span>object<\/span>-<\/span>section<\/span>&<\/span>quot<\/span>;<\/span>><\/span>\n                      <<\/span>MonitorSVG<\/span> /><\/span>\n                    </<\/span>div<\/span>><\/span>\n                    <<\/span>div<\/span> className<\/span>=&<\/span>quot<\/span>;<\/span>media<\/span>-<\/span>object<\/span>-<\/span>section<\/span>&<\/span>quot<\/span>;<\/span>><\/span>\n                      <<\/span>p<\/span> className<\/span>=&<\/span>quot<\/span>;<\/span>header<\/span>-<\/span>medium<\/span>&<\/span>quot<\/span>;<\/span>><\/span>Bring<\/span> civic<\/span> data<\/span> to<\/span> life<\/span> through<\/span> interactive<\/span> maps<\/span> and<\/span> visualizations<\/span></<\/span>p<\/span>><\/span>\n                    </<\/span>div<\/span>><\/span>\n                  </<\/span>div<\/span>><\/span>\n\n                  <<\/span>div<\/span> className<\/span>=&<\/span>quot<\/span>;<\/span>media<\/span>-<\/span>object<\/span>&<\/span>quot<\/span>;<\/span>><\/span>\n                    <<\/span>div<\/span> className<\/span>=&<\/span>quot<\/span>;<\/span>media<\/span>-<\/span>object<\/span>-<\/span>section<\/span>&<\/span>quot<\/span>;<\/span>><\/span>\n                      <<\/span>SkylineSVG<\/span> /><\/span>\n                    </<\/span>div<\/span>><\/span>\n                    <<\/span>div<\/span> className<\/span>=&<\/span>quot<\/span>;<\/span>media<\/span>-<\/span>object<\/span>-<\/span>section<\/span>&<\/span>quot<\/span>;<\/span>><\/span>\n                      <<\/span>p<\/span> className<\/span>=&<\/span>quot<\/span>;<\/span>header<\/span>-<\/span>medium<\/span>&<\/span>quot<\/span>;<\/span>><\/span>Create<\/span> tools<\/span> to<\/span> help<\/span> Savannah<\/span> residents<\/span> better<\/span> understand<\/span> the<\/span> built<\/span> environment<\/span></<\/span>p<\/span>><\/span>\n                    </<\/span>div<\/span>><\/span>\n                  </<\/span>div<\/span>><\/span>\n\n                  <<\/span>div<\/span> className<\/span>=&<\/span>quot<\/span>;<\/span>media<\/span>-<\/span>object<\/span>&<\/span>quot<\/span>;<\/span>><\/span>\n                    <<\/span>div<\/span> className<\/span>=&<\/span>quot<\/span>;<\/span>media<\/span>-<\/span>object<\/span>-<\/span>section<\/span>&<\/span>quot<\/span>;<\/span>><\/span>\n                      <<\/span>FolderSVG<\/span> /><\/span>\n                    </<\/span>div<\/span>><\/span>\n                    <<\/span>div<\/span> className<\/span>=&<\/span>quot<\/span>;<\/span>media<\/span>-<\/span>object<\/span>-<\/span>section<\/span>&<\/span>quot<\/span>;<\/span>><\/span>\n                      <<\/span>p<\/span> className<\/span>=&<\/span>quot<\/span>;<\/span>header<\/span>-<\/span>medium<\/span>&<\/span>quot<\/span>;<\/span>><\/span>Build<\/span> simple<\/span> web<\/span>-<\/span>based<\/span> tools<\/span> to<\/span> streamline<\/span> internal<\/span> workflows<\/span></<\/span>p<\/span>><\/span>\n                    </<\/span>div<\/span>><\/span>\n                  </<\/span>div<\/span>><\/span>\n\n                </<\/span>div<\/span>><\/span>\n              </<\/span>div<\/span>><\/span>\n\n              <<\/span>div<\/span> className<\/span>=&<\/span>quot<\/span>;<\/span>recent<\/span>-<\/span>posts<\/span>-<\/span>container<\/span>&<\/span>quot<\/span>;<\/span>><\/span>\n                 <<\/span>h2<\/span> className<\/span>=&<\/span>quot<\/span>;<\/span>header<\/span>-<\/span>xlarge<\/span>&<\/span>quot<\/span>;<\/span>><\/span>Recent<\/span> blog<\/span> posts<\/span> <<\/span>small<\/span> style<\/span>=<\/span>{{<\/span>fontSize<\/span>:<\/span>&<\/span>quot<\/span>;<\/span>0.6<\/span>em<\/span>&<\/span>quot<\/span>;}}<\/span>><<\/span>a<\/span> href<\/span>=&<\/span>quot<\/span>;<\/span>https<\/span>:<\/span>//<\/span>medium<\/span>.<\/span>com<\/span>/<\/span>nycplanninglabs<\/span>&<\/span>quot<\/span>;<\/span>><\/span>See<\/span> All<\/span> (<\/span>medium<\/span>.<\/span>com<\/span>)<\/span></<\/span>a<\/span>></<\/span>small<\/span>></<\/span>h2<\/span>><\/span>\n                 <<\/span>BlogPosts<\/span> /><\/span>\n              </<\/span>div<\/span>><\/span>\n\n\n            </<\/span>div<\/span>><\/span>\n          </<\/span>div<\/span>><\/span>\n        </<\/span>div<\/span>><\/span>\n\n      </<\/span>div<\/span>><\/span>\n    )<\/span>\n  }<\/span>\n}<\/span>\n\nexport<\/span> default<\/span> IndexPage<\/span>\n<\/pre><\/div>\n

hero.js:<\/p>\n

import<\/span> React<\/span> from<\/span> 'react'<\/span>\nimport<\/span> Link<\/span> from<\/span> 'gatsby-link'<\/span>\n\n\nclass<\/span> Hero<\/span> extends<\/span> React<\/span>.<\/span>Component<\/span> {<\/span>\n render<\/span>()<\/span> {<\/span>\n   const<\/span> title<\/span> =<\/span> this<\/span>.<\/span>props<\/span>.<\/span>title<\/span> ?<\/span> <<\/span>h1<\/span> className<\/span>=&<\/span>quot<\/span>;<\/span>header<\/span>-<\/span>large<\/span>&<\/span>quot<\/span>;<\/span>><\/span>{<\/span> this<\/span>.<\/span>props<\/span>.<\/span>title<\/span> }<\/span></<\/span>h1<\/span>><\/span> :<\/span> null<\/span>;<\/span>\n\n   const<\/span> tagline<\/span> =<\/span> this<\/span>.<\/span>props<\/span>.<\/span>tagline<\/span> ?<\/span> <<\/span>h2<\/span> className<\/span>=&<\/span>quot<\/span>;<\/span>header<\/span>-<\/span>xlarge<\/span>&<\/span>quot<\/span>;<\/span>><\/span>{<\/span> this<\/span>.<\/span>props<\/span>.<\/span>tagline<\/span> }<\/span></<\/span>h2<\/span>><\/span> :<\/span> null<\/span>;<\/span>\n\n   let<\/span> button<\/span> =<\/span> null<\/span>;<\/span>\n\n   if<\/span> (<\/span>this<\/span>.<\/span>props<\/span>.<\/span>buttonText<\/span> &&<\/span> this<\/span>.<\/span>props<\/span>.<\/span>buttonURL<\/span>)<\/span> {<\/span>\n     if<\/span> (<\/span>this<\/span>.<\/span>props<\/span>.<\/span>buttonURL<\/span>.<\/span>split<\/span>(<\/span>'//'<\/span>)[<\/span>1<\/span>])<\/span> {<\/span>\n       button<\/span> =<\/span> <<\/span>a<\/span> href<\/span>=<\/span>{<\/span> this<\/span>.<\/span>props<\/span>.<\/span>buttonURL<\/span> }<\/span> className<\/span>=&<\/span>quot<\/span>;<\/span>button<\/span> large<\/span>&<\/span>quot<\/span>;<\/span> target<\/span>=&<\/span>quot<\/span>;<\/span>_blank<\/span>&<\/span>quot<\/span>;<\/span>><\/span>Join<\/span> Us<\/span></<\/span>a<\/span>><\/span>\n     }<\/span> else<\/span> {<\/span>\n       button<\/span> =<\/span> <<\/span>Link<\/span> to<\/span>=<\/span>{<\/span> this<\/span>.<\/span>props<\/span>.<\/span>buttonURL<\/span> }<\/span> className<\/span>=&<\/span>quot<\/span>;<\/span>button<\/span> large<\/span>&<\/span>quot<\/span>;<\/span>><\/span>Learn<\/span> more<\/span></<\/span>Link<\/span>><\/span>\n     }<\/span>\n   }<\/span>\n\n   let<\/span> button2<\/span> =<\/span> null<\/span>;<\/span>\n\n   if<\/span> (<\/span>this<\/span>.<\/span>props<\/span>.<\/span>button2Text<\/span> &&<\/span> this<\/span>.<\/span>props<\/span>.<\/span>button2URL<\/span>)<\/span> {<\/span>\n     if<\/span> (<\/span>this<\/span>.<\/span>props<\/span>.<\/span>button2URL<\/span>.<\/span>split<\/span>(<\/span>'//'<\/span>)[<\/span>1<\/span>])<\/span> {<\/span>\n       button2<\/span> =<\/span> <<\/span>a<\/span> href<\/span>=<\/span>{<\/span> this<\/span>.<\/span>props<\/span>.<\/span>button2URL<\/span> }<\/span> className<\/span>=&<\/span>quot<\/span>;<\/span>button<\/span> large<\/span>&<\/span>quot<\/span>;<\/span> target<\/span>=&<\/span>quot<\/span>;<\/span>_blank<\/span>&<\/span>quot<\/span>;<\/span>><\/span>Join<\/span> Us<\/span></<\/span>a<\/span>><\/span>\n     }<\/span> else<\/span> {<\/span>\n       button2<\/span> =<\/span> <<\/span>Link<\/span> to<\/span>=<\/span>{<\/span> this<\/span>.<\/span>props<\/span>.<\/span>button2URL<\/span> }<\/span> className<\/span>=&<\/span>quot<\/span>;<\/span>button<\/span> large<\/span>&<\/span>quot<\/span>;<\/span>><\/span>Learn<\/span> more<\/span></<\/span>Link<\/span>><\/span>\n     }<\/span>\n   }<\/span>\n\n   return<\/span> <<\/span>div<\/span> className<\/span>=&<\/span>quot<\/span>;<\/span>hero<\/span>&<\/span>quot<\/span>;<\/span>><\/span>\n     <<\/span>div<\/span> className<\/span>=&<\/span>quot<\/span>;<\/span>grid<\/span>-<\/span>container<\/span>&<\/span>quot<\/span>;<\/span>><\/span>\n       <<\/span>div<\/span> className<\/span>=&<\/span>quot<\/span>;<\/span>grid<\/span>-<\/span>x<\/span> grid<\/span>-<\/span>padding<\/span>-<\/span>x<\/span>&<\/span>quot<\/span>;<\/span>><\/span>\n         <<\/span>div<\/span> className<\/span>=&<\/span>quot<\/span>;<\/span>cell<\/span>&<\/span>quot<\/span>;<\/span>><\/span>\n          {<\/span>title<\/span>}<\/span>\n          {<\/span>tagline<\/span>}<\/span>\n          {<\/span>button<\/span>}<\/span>\n          {<\/span>button2<\/span>}<\/span>\n\n         </<\/span>div<\/span>><\/span>\n       </<\/span>div<\/span>><\/span>\n     </<\/span>div<\/span>><\/span>\n   </<\/span>div<\/span>><\/span>\n }<\/span>\n}<\/span>\n\nexport<\/span> default<\/span> Hero<\/span>\n<\/pre><\/div>
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 (

Information + Invitation = Participation

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.

Bring civic data to life through interactive maps and visualizations

Create tools to help Savannah residents better understand the built environment

Build simple web-based tools to streamline internal workflows

Recent blog posts See All (medium.com)

) } } 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 ?

{ this.props.title }

: null; const tagline = this.props.tagline ?

{ this.props.tagline }

: null; let button = null; if (this.props.buttonText && this.props.buttonURL) { if (this.props.buttonURL.split('//')[1]) { button = Join Us } else { button = Learn more } } let button2 = null; if (this.props.button2Text && this.props.button2URL) { if (this.props.button2URL.split('//')[1]) { button2 = Join Us } else { button2 = ">Learn">{ this.props.button2Text } } } return more } } return
className="hero">
{title} {tagline} {button} {button2}
} } export default Hero
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 (

Information + Invitation = Participation

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.

Bring civic data to life through interactive maps and visualizations

Create tools to help Savannah residents better understand the built environment

Build simple web-based tools to streamline internal workflows

Recent blog posts See All (medium.com)

) } } 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 ?

{ this.props.title }

: null; const tagline = this.props.tagline ?

{ this.props.tagline }

: null; let button = null; if (this.props.buttonText && this.props.buttonURL) { if (this.props.buttonURL.split('//')[1]) { button = Join Us } else { button = Learn more } } let button2 = null; if (this.props.button2Text && this.props.button2URL) { if (this.props.button2URL.split('//')[1]) { button2 = Join Us } else { button2 = { this.props.button2Text } } } return
{title} {tagline} {button} {button2}
} } 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 = Join Us } else { button2 = { this.props.button2Text } } } ... {button2}

User: kostasx

Question: Trying to duplicate simple button component in react.js with different text/URL

Back to question