Mapping components

100%

Mapping components

✓ Published0🌍 Public

Last edited Feb 16, 2020

Created on Feb 16, 2020

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.

AI-generated description

In this exercise, I will take an array of raw data and convert them into a number of components.

Use imported array of objects to make a list of jokes

MIT Licensed

Similar vizzes

Loading thumbnail…

React 201

This example demonstrates how React components render a list of jokes, conditionally displaying questions and answers from a static dataset. It uses React’s `map` method to transform joke objects into `Joke` components, with inline styles dynamically hiding questions and graying answer text when a question is absent. The code imports React and ReactDOM to mount the `App` component, while jokes are sourced from a local `jokesData.js` file. The visualization also references population data from World Population Prospects 2017, though that dataset is not used in the visible rendering.

Ddata-inside

84% match

Loading thumbnail…

Props in react

This example demonstrates how React components pass data through props, rendering a list of jokes where each joke card displays a question and punchline. The `App` component passes a `bunk` object containing optional `question` and `punchline` fields to three `Joke` components. Using inline styles, the `Joke` component conditionally hides the question heading with `display: none` when no question exists, and changes the punchline background to orange for standalone punchlines. The code uses React’s `useState` implicitly through prop passing, with the `ReactDOM.render` API mounting the app.

JJunyanL

81% match

Loading thumbnail…

React 301 (state)

This example demonstrates React state management within a class component, rendering a simple question-and-answer display. The App component holds state via `this.state` and updates the rendered text. It also maps over an array of joke objects, using conditional logic and inline styles to toggle visibility and color based on whether a question exists. The code imports React and uses `ReactDom.render` to mount the app to the DOM. While the repository references a population dataset, the actual visualization is not implemented in the provided files, which focus solely on React component interactions.

Ddata-inside

72% match

Loading thumbnail…

React Maps

This example shows a React application that renders a simple message, “Hello React!”, centered on the page using large, bold text. It demonstrates how to set up a React component and mount it to the DOM via `ReactDOM.render`. The code uses `React` and `ReactDOM` from the UMD production builds loaded via CDN, with the app defined as a functional component returning a `<div>` element with a CSS class. No data source or external visualization library is used; the example only displays static text styled through the `message` class.

FFelipe Maion

69% match

Loading thumbnail…

Map 3

This example renders a React application that displays the text “Map 3” at a large font size. The code uses React and ReactDOM, with the `App` component returning a styled message. The page is built using an external bundle, and the chart or map itself is not implemented in the provided source, showing only placeholder content.

AAnnie Ulichney

67% match

Loading thumbnail…

Map function javascript

This example demonstrates the JavaScript `Array.prototype.map` function by squaring the values in a fixed array `[10, 20]` and rendering the resulting numbers as a large, centered text message. The React component `App` calls `array.map` twice, first to square each element and then to square the result again, producing the values 10000 and 40000. The application uses React 16.10 via production UMD builds, with the output displayed inside the `#root` element. The background color is applied through CSS in the HTML file, and the console logs the intermediate squared values.

NNita

67% match

Loading thumbnail…

How to use function "map"

This example demonstrates how to use the JavaScript `map` function on an array. It defines an array `[10, 20, 30]` and applies `map` to multiply each element by 2, logging the result to the console. The React application does not render any visible content; instead, the example focuses on the logic of transforming data with `map` within a React component structure. It uses React and ReactDOM from the UMD builds, with all logic contained in the `index.js` file.

NNita

66% match

Loading thumbnail…

Map function javascript

This example demonstrates the JavaScript `Array.map()` method by applying a squaring function to a numeric array and logging each result to the console. It also renders a single calculated value (225) on screen using React 16.10. The visualization component uses ReactDOM to mount the result within a light green root container, while the console output shows the mapped answers from the hardcoded data array `[10, 20]`. The code combines React for UI rendering with native JavaScript functional programming for data transformation.

NNita

65% match