Component generated by ChatGPT in Vue, Angular, Svelte, React

Button.js

/* Create a Vue3 component that displays a button that is set as an attribute, and toggle the background color from either black or pink */
const App = {
  setup() {
    const color = ref('black');
    const handleClick = () => {
      color.value = color.value === 'black' ? 'pink' : 'black';
    };
    return {
      color,
      handleClick
    };
  },
  template: `
    <div>
      <button :style="{backgroundColor: color}" @click="handleClick">Toggle Color</button>
    </div>
  `
};
const app = Vue.createApp(App);
app.mount('#root');

/* Convert it into an Angular component */
import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  template: `
    <div>
      <button [style.backgroundColor]="color" (click)="handleClick()">Toggle Color</button>
    </div>
  `
})
export class AppComponent {
  color = 'black';
  handleClick() {
    this.color = this.color === 'black' ? 'pink' : 'black';
  }
}

/* Convert it into SvelteJS */
<script>
  let color = 'black';
  function handleClick() {
    color = color === 'black' ? 'pink' : 'black';
  }
</script>
<div>
  <button style="background-color: {color}" on:click="{handleClick}">Toggle Color</button>
</div>

/* Convert this into a React function component */
import React, { useState } from 'react';
function App() {
  const [color, setColor] = useState('black');
  const handleClick = () => {
    setColor(color === 'black' ? 'pink' : 'black');
  };
  return (
    <div>
      <button style={{backgroundColor: color}} onClick={handleClick}>Toggle Color</button>
    </div>
  );
}