Preview:
//FavColor.jsx

import React,{useState} from 'react';

const fav=()=>{

const[color,setColor]=useState("red");
  
  return(
<>
    <h1>fav color is {color}</h1>
    <button     type="button"  onClick={()=>setColor("blue")} className="btn1">
    Blue
    </button>

<button type="button"  onClick={()=>setColor("red")}  className="btn2">Red</button>



    </>
  )
}

export default fav;


//App.jsx
import React from 'react';
import FavColor from './FavColor';

export function App() {
  return (
    <div className='App'>
    <FavColor  />

    </div>
  );
}
downloadDownload PNG downloadDownload JPEG downloadDownload SVG

Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!

Click to optimize width for Twitter