Блог

Я хочу изменить размер кнопки на основе данных реквизита, если данные реквизита есть, то размер кнопки должен быть другим, а если данных реквизита нет, то размер кнопки должен быть другим.

 <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>;
 

Почему я должен скрываться, потому что, если нет данных, кнопка GitHub должна быть отключена.

Вот мой файл источника данных 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"
},
 

Вы можете использовать, как показано ниже:

и вы можете добавить класс css size10 и класс size0.

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