title: Pass the fetched data from an API and use it to style buttons using React and Sass
body: <p>I have fetched some data from an API using which I created a list of buttons. Let's say the data I received looks like below -</p>
  <pre><code>  { name: &quot;bob&quot;, colorCode: &quot;#DC7472&quot; },
    { name: &quot;ben&quot;, colorCode: &quot;#69DCD1&quot; },
    { name: &quot;john&quot;, colorCode: &quot;#1570C5&quot; },
    { name: &quot;joe&quot;, colorCode: &quot;#1550C4&quot; }
  ];
  </code></pre>
  <p>Using this data, I created buttons and the name of the buttons corresponds to the name property in each of the array item.</p>
  <p>Each of the button has the initial state of false, and onClick of the button, it toggles to true and false.</p>
  <p>Now, when any of the button's state is true, I want to use the background-color as the respective colorCode property and the button text color to white.</p>
  <p>Similarly, when it is false, I want the button text to be of the respective colorCode property and background color to white.</p>
  <p>The initial state looks like below -</p>
  <pre><code>{
   bob:false,
   ben:false,
   john:false,
   joe:false
  }
  </code></pre>
  <p>You can find the code here - <a href="https://stackblitz.com/edit/react-dam8vt" rel="nofollow noreferrer">https://stackblitz.com/edit/react-dam8vt</a></p>
  <p>I am struggling on how to achieve that using React and Sass?</p>