import { useState } from "react"; import ReactDOM from "react-dom/client"; function Car() { const [car, setCar] = useState({ brand: "Ford", model: "Mustang", year: "1964", color: "red" }); const updateColor = () => { setCar(previousState => { return { ...previousState, color: "blue" } }); } return ( <> <h1>My {car.brand}</h1> <p> It is a {car.color} {car.model} from {car.year}. </p> <button type="button" onClick={updateColor} >Blue</button> </> ) } const root = ReactDOM.createRoot(document.getElementById('root')); root.render(<Car />);
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