//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>
);
}
Preview:
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