patternjavascriptModerate
Generation of a <dl> in React without <div> wrapping elements
Viewed 0 times
withoutelementsreactdivgenerationwrapping
Problem
In React, the
'use strict'
import React from 'react'
import createFragment from 'react-addons-create-fragment'
import isArray from 'lodash.isarray'
/**
* Creates a element using React from the given map.
* @param {Map>} map A map of name-value pairs. The keys of the map are used as labels for definitions, so they should be legible. The values are used as the value of the definition. If there are multiple values to a definition (i.e, an array), then multiple elements will be created for the resultant .
* @return {ReactElement} A React element encapsulating the .
*/
export default function createDefinitionList(map) {
const labels = Object.keys(map)
return
{labels.map((label) => createDefinitionFragment(label, map[label]))}
}
/**
* Creates a with associated s inside of a React fragment. Fragments are keyed.
* @param {string} label A human-readable description of the definition
* @param {any|Array} value a value, or a set of values. If given a set of values, multiple elements will be generated; these elements will be keyed using their array index.
* @return {ReactElement} A definition list in React element form.
*/
function createDefinitionFragment(label, value) {
return createFragment({
definition: {label},
value: createDefinitionValueFragments(value)
})
}
/**
* Creates a React fragment for the given value. If value is an array, a fragment will be created which encapsulates all values
render method must have one and exactly one child (although that child may have many more children). As a result, it becomes difficult to render elements that intrinsically need multiple elements as children without wrapping them in an unsemantic - and in the case of `, forbidden - element.
As I result, I wrote the following code to help generate a definition list from a model. I'd like to know what you guys think. Its being used in my company's application at the moment and I was wondering if there was anything I could improve on.
``'use strict'
import React from 'react'
import createFragment from 'react-addons-create-fragment'
import isArray from 'lodash.isarray'
/**
* Creates a element using React from the given map.
* @param {Map>} map A map of name-value pairs. The keys of the map are used as labels for definitions, so they should be legible. The values are used as the value of the definition. If there are multiple values to a definition (i.e, an array), then multiple elements will be created for the resultant .
* @return {ReactElement} A React element encapsulating the .
*/
export default function createDefinitionList(map) {
const labels = Object.keys(map)
return
{labels.map((label) => createDefinitionFragment(label, map[label]))}
}
/**
* Creates a with associated s inside of a React fragment. Fragments are keyed.
* @param {string} label A human-readable description of the definition
* @param {any|Array} value a value, or a set of values. If given a set of values, multiple elements will be generated; these elements will be keyed using their array index.
* @return {ReactElement} A definition list in React element form.
*/
function createDefinitionFragment(label, value) {
return createFragment({
definition: {label},
value: createDefinitionValueFragments(value)
})
}
/**
* Creates a React fragment for the given value. If value is an array, a fragment will be created which encapsulates all values
Solution
as of React 16 version you can use
You can also use a short hand for
It works in the same way, except that it doesn't support any attributes or key.
https://reactjs.org/docs/fragments.html
Term
Definition
React.Fragment will not render any DOM, but it'll act as a container.You can also use a short hand for
React.Fragment as <><>
Term
Definition
It works in the same way, except that it doesn't support any attributes or key.
https://reactjs.org/docs/fragments.html
Code Snippets
<React.Fragment>
<dt>Term</dt>
<dd>Definition</dd>
</React.Fragment><>
<dt>Term</dt>
<dd>Definition</dd>
</>Context
StackExchange Code Review Q#106260, answer score: 10
Revisions (0)
No revisions yet.