How render react components from array

Question

I have several components.

formFields/index.js

export {default as description} from './description/description.component'
export {default as title} from './title/title.component'

I import them and get a list of FormFields in mainComponent

import * as FormFields from '../formFields'

How can I use them in render function?

This is one of my failed attempts:

import * as FormFields from '../formFields'

render() {

  let properties = ['description', 'title'];

  let getComponent = (type) => {
    let formElement = FormFields[type]
    return <formElement/>
  }

  return (
    <div>
      {properties.map((property, i) => {
        return (
          <div key={i}>
            {getComponent(property)}
          </div>
        );
      })}
    </div>
  )
}

This experiment is successful:

render() {
  let EditComponent = FormFields['description']
  return (
    <div>
      <EditComponent/>
    </div>
  )
}

Fabian Schultz · Accepted Answer · 2016-11-21 18:32:19Z

2

Here's a simple example that also passes the same props. It is essentially an array of components that you map and then, simply render.

class Description extends React.Component {
  render() {
    return <div>{this.props.prop}</div>;
  }
}

class Title extends React.Component {
  render() {
    return <div>{this.props.prop}</div>;
  }
}

const myComponents = [
  Description,
  Title,
];

class App extends React.Component {
  render() {
    return (
      <div>
        {myComponents.map((FormField, i) => <FormField key={i} prop="Hello World!" /> )}
      </div>
    );
  }
}


ReactDOM.render(<App/>, document.getElementById('View'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="View"></div>

edited Nov 21, 2016 at 18:32

answered Nov 21, 2016 at 18:08

Fabian Schultz

18.6k6 gold badges54 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

zackify Over a year ago

don't forget to add a key prop :)

Collectives™ on Stack Overflow

How render react components from array

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related