How can I render repeating React elements?

by

You can put expressions inside braces. Notice in the compiled JavaScript why a for loop would never be possible inside JSX syntax; JSX amounts to function calls and sugared function arguments. Only expressions are allowed.

(Also: Remember to add key attributes to components rendered inside loops.)

JSX + ES2015:

render() {
  return (
    <table className="MyClassName">
      <thead>
        <tr>
          {this.props.titles.map(title =>
            <th key={title}>{title}</th>
          )}
        </tr>
      </thead>
      <tbody>
        {this.props.rows.map((row, i) =>
          <tr key={i}>
            {row.map((col, j) =>
              <td key={j}>{col}</td>
            )}
          </tr>
        )}
      </tbody>
    </table>
  );
}

JavaScript:

render: function() {
  return (
    React.DOM.table({className: "MyClassName"}, 
      React.DOM.thead(null, 
        React.DOM.tr(null, 
          this.props.titles.map(function(title) {
            return React.DOM.th({key: title}, title);
          })
        )
      ), 
      React.DOM.tbody(null, 
        this.props.rows.map(function(row, i) {
          return (
            React.DOM.tr({key: i}, 
              row.map(function(col, j) {
                return React.DOM.td({key: j}, col);
              })
            )
          );
        })
      )
    )
  );
}

More Related Contents:

  1. Unable to access React instance (this) inside event handler [duplicate]
  2. React: “this” is undefined inside a component function
  3. State not updating when using React state hook within setInterval
  4. “this” is undefined inside map function Reactjs
  5. How do I conditionally add attributes to React components?
  6. React component initialize state from props
  7. How do I test axios in Jest?
  8. Why can’t I update props in react.js?
  9. Intercept/handle browser’s back button in React-router?
  10. react router doesn’t work in aws s3 bucket
  11. React Routing works in local machine but not Heroku
  12. Rendering React components with promises inside the render method
  13. react useEffect comparing objects
  14. When to use JSX.Element vs ReactNode vs ReactElement?
  15. React useState hook event handler using initial state
  16. Get path params in react-router v4
  17. In reactJS, how to copy text to clipboard?
  18. Difference between declarative and imperative in React.js?
  19. How do I setState for nested object?
  20. Getting an error “A non-serializable value was detected in the state” when using redux toolkit – but NOT with normal redux
  21. React eslint error missing in props validation
  22. useEffect is running twice on mount in React
  23. React – useState – why setTimeout function does not have latest state value?
  24. Matched leaf route at location “/” does not have an element
  25. Simulate a button click in Jest
  26. Uncaught Invariant Violation: Rendered more hooks than during the previous render
  27. How to mock React component methods with jest and enzyme
  28. Class based component vs Functional components what is the difference ( Reactjs ) [duplicate]
  29. value of using React.forwardRef vs custom ref prop
  30. create-react-app is showing all my code in production, how to hide it?

Leave a Comment