Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

JSX inline styling

Public visualization

JSX inline styling

0 stars1🌍 Public
JJunyanL
Last edited Feb 14, 2020
Created on Feb 14, 2020
Forked from To-do list

This example shows how JSX inline styling dynamically changes a headline’s color and background based on the current hour. The React component creates a Date object for March 14, 2020, at 2 PM, determines whether it is morning or afternoon, and applies a green background for morning hours or orange for afternoon. Styling is defined as a JavaScript object with camelCase properties, and the `style` attribute uses double braces to embed the object in JSX. The code imports React and ReactDOM from their production UMD builds served via CDN.

AI-generated description

React Starter code.

Comments

Sign in to join the discussion.

MIT Licensed