Back
Syntax
Study
Editor
Mode:
HTML
CSS
JavaScript
PHP
Reset
Run »
HTML / CSS / JS
import React from 'react'; // Short fragment syntax (most common) function TagList({ tags }) { return ( <> <h4>Tags</h4> <ul> {tags.map(tag => ( <li key={tag}>{tag}</li> ))} </ul> </> ); } // Long form required when key is needed (e.g. inside a list) function DefinitionList({ items }) { return ( <dl> {items.map(item => ( <React.Fragment key={item.term}> <dt>{item.term}</dt> <dd>{item.definition}</dd> </React.Fragment> ))} </dl> ); } // JSX comments — wrap in { } function Annotated() { return ( <div> {/* This is a JSX comment — invisible in output */} <p>Visible text</p> {/* <p>Commented-out element</p> */} {/* Explicit space between inline elements */} <strong>Bold</strong>{' '}<em>Italic</em> </div> ); } export default TagList;
Result
Open