React 30 seconds: Render array data into lists and tables

30-seconds-of-react React 30 seconds learning: Full Chinese translation, learning, address: 30-seconds-of-react-zh_cn-umi, all cases with analysis, annotation, online.

Series of articles:

• React 30 seconds: Render array data into lists and tables
• React 30 Seconds learning: Make input fields, password visibility, slider components, drop-down selectors, check box components
• React 30 seconds: Create multi-line text components that limit the number of characters and words
• React 30 seconds Speed learning: Implement collapsible, infinite hierarchy tree components
• React 30 Seconds: Make text components that automatically recognize links
• React 30 Seconds To Learn: Make accordion components
• React 30 Seconds Learning: Create a multicast component
• React 30 Seconds Quick Learning: Make folding panel components
• React 30 Seconds: Create a countdown component
• React 30 seconds Quick Learning: Create file drag and drop components
• React 30 Seconds Speed Learning: Make modal box components
• React 30 Seconds Learning: Create a star rating component
• React 30 Seconds Learning: Make TAB components

DataList renders as a list

Render the list of elements by array.

• useisOrderedThe value of prop is rendered conditionally<ol>or<ul>List.
• useArray.prototype.mapwilldataFor each item rendered as<li>Element, given a concatenation of its index and valuekey.
• By default, omittedisOrderedProp to render<ul>List.

function DataList({ isOrdered, data }) {
  const list = data.map((val, i) => <li key={`${i}_${val}`}>{val}</li>);
  return isOrdered ? <ol>{list}</ol> : <ul>{list}</ul>;
}
Copy the code

export default function() {
  const names = ['John'.'Paul'.'Mary'];
  return<div> Unordered list: <DataList data={names} /> Ordered list: <DataList data={names} isOrdered /> </div>) }Copy the code

ps:

• The sample code
• Running effect

DataTable renders as a table

Render the table with an array, dynamically creating each row.

* Render a

function DataTable({ data }) {
  return (
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>Value</th>
        </tr>
      </thead>
      <tbody>
        {data.map((val, i) => (
          <tr key={` ${i}_The ${val} `} >
            <td>{i}</td>
            <td>{val}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}
Copy the code

export default function() {
  const people = ['John'.'Jesse'];
  return <DataTable data={people} />;
}
Copy the code

ps:

• The sample code
• Running effect

MappedTable is rendered as a mapping table

Render the table from an array of objects, with property names corresponding to columns, dynamically creating each row.

• useObject.keys().Array.prototype.filter().Array.prototype.includes()andArray.prototype.reduce()To generate afilteredDataArray containing all objects usedpropertyNamesThe key specified in.
• Rendering a<table>Element, where a set of columns is equal topropertyNamesThe value.
• useArray.prototype.mapwillpropertyNamesEach value in the array is rendered as<th>Elements.
• useArray.prototype.mapwillfilteredDataEach object in the array is rendered as<tr>Element, one for each key in the object<td>.

function MappedTable({ data, propertyNames }) {
  let filteredData = data.map(v= >
    Object.keys(v)
      .filter(k= > propertyNames.includes(k))
      // Assign the acc object iteratively:
      / / callback function for the acc, key) = > ([key] [key] = v (acc), acc) initial values for {}
      // ((operation), return value); // ((operation), return value
      .reduce(( acc, key) = > ((acc[key] = v[key]), acc), {}),
  );
  return (
    <table>
      <thead>
        <tr>
          {propertyNames.map(val => (
            <th key={`h_The ${val} `} >{val}</th>
          ))}
        </tr>
      </thead>
      <tbody>
        {filteredData.map((val, i) => (
          <tr key={`i_The ${i} `} >
            {propertyNames.map(p => (
              <td key={`i_The ${i}_The ${p} `} >{val[p]}</td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  );
}
Copy the code

Notes

This component does not work with nested objects and breaks if there are nested objects in any of the properties specified in propertyNames.

export default function() {
  const people = [
    { name: 'John'.surname: 'Smith'.age: 42 },
    { name: 'Adam'.surname: 'Smith'.gender: 'male'},];const propertyNames = ['name'.'surname'.'age'];
  return <MappedTable data={people} propertyNames={propertyNames} />;
}
Copy the code

ps:

• The sample code
• Running effect