Button size change on the basis of props data in React JS-CodePudding

I want to change the size of a button on the basis of props data if props data is there then the button size should be different and if props data is not there then button size should be different.

<div className='projectBtn'>
  <a href={props.liveWebsite} target='_blank'>
    <button className='liveWebsiteBtn'>Live Website</button>
  </a>

  <a href={props.github} target='_blank'>
    <button className='githubBtn' hidden={!props.github}>
      Github Code
    </button>
  </a>
</div>;

Why I am supposed to hidden because if there is no data then the GitHub button should be disabled.

Here is my data source file Sdata.jsx

const Sdata = [
{
    imgsrc: jokes,
    title: "Jokes Web App using API",
    desc: "This React-JS Jokes App built up using API.",
    tech1: "React",
    tech2: "Jokes API",
    tech3: "Axios",
    tech4: "Github",
    liveWebsite:"example.com",
    github: "example.com"
},

CodePudding user response：

You can use the disabled option in <button:

<button className="githubBtn" disabled={!props.github}>Github Code</button>

CodePudding user response：

You can use like below:

and you can add css to class size10 and size0 class.

<button className={props.github ? 'size10' : 'size0'}>Github Code</button>