{"version":"1.0","type":"rich","title":"Mapping components","description":"This example shows how to render a list of jokes from an array of objects using React components. The `App` component maps over the imported `JokeSource` array and passes each item’s `question` and `punchline` as props to the `Joke` component, which conditionally displays the question and adjusts the punchline font size based on whether a question exists. The code uses React’s `map()` method to generate multiple DOM elements dynamically from the static data file.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/dd9f4328f3ed4cb3878d97be3bfe4416?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}