Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Props in react

Public visualization

Viewing a saved revision (read-only)

574efc0a6e9242fbaa8fbaa3f7f5fb16

Props in react

0 stars1🌍 Public
JJunyanL
Last edited Feb 16, 2020
Created on Feb 14, 2020
Forked from 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.

AI-generated description

Joke generator with inline style. If there is just the punchline, conceal the question line and make punchline background orange.