So I'm basically a week old to react and have not written any javascript code for years. So please forgive my ignorance if any.

Question I have created three different ponent classes

 const CreatedDate = React.createClass({
  displayName: 'CreatedDate',
  propTypes: {
    name: 'CreateDate',
    from: React.PropTypes.string,
    to: React.PropTypes.string,
    format: React.PropTypes.string,
    onChange: React.PropTypes.func
  },

//rest of the code and functions

And likewise, I have a class similar to this called ClientSignedDate and VerificationDate all of which containing basically same input props but get data from different columns of the same table.

In a separate ParentClass called Filter I have created an array of these ponents inside this class

const dateOptions = [CreatedDate,ClientSignedDate,VerificationDate];

It was previously working when there was only one ponent

          <CreatedDate
            from={this.props.filter.createdDateFrom}
            to={this.props.filter.createdDateTo}
            onChange={this.handleCreatedDateChange}
          />

And I basically want to render the ponent based on user selection but I'm not able to figure out how to do so. Something similar to the snippet below but which allows rendering.

 <select>{dateOptions.map(x => <option>{x}</option>)}</select>

So I'm basically a week old to react and have not written any javascript code for years. So please forgive my ignorance if any.

Question I have created three different ponent classes

 const CreatedDate = React.createClass({
  displayName: 'CreatedDate',
  propTypes: {
    name: 'CreateDate',
    from: React.PropTypes.string,
    to: React.PropTypes.string,
    format: React.PropTypes.string,
    onChange: React.PropTypes.func
  },

//rest of the code and functions

And likewise, I have a class similar to this called ClientSignedDate and VerificationDate all of which containing basically same input props but get data from different columns of the same table.

In a separate ParentClass called Filter I have created an array of these ponents inside this class

const dateOptions = [CreatedDate,ClientSignedDate,VerificationDate];

It was previously working when there was only one ponent

          <CreatedDate
            from={this.props.filter.createdDateFrom}
            to={this.props.filter.createdDateTo}
            onChange={this.handleCreatedDateChange}
          />

And I basically want to render the ponent based on user selection but I'm not able to figure out how to do so. Something similar to the snippet below but which allows rendering.

 <select>{dateOptions.map(x => <option>{x}</option>)}</select>

• javascript
• html
• reactjs
• redux

• Are you essentially asking how to render dynamic ponents, instead of using only static JSX? That's how I understand your question. – user5734311 Commented May 23, 2018 at 20:48
• I want to render different ponents that take in same props based on what the user has selected. – shashwatZing Commented May 24, 2018 at 12:21

3 Answers 3

And I basically want to render the ponent based on user selection

The simplest way is

{ this.state.selection === 1 && <CreatedDate ... /> }
{ this.state.selection === 2 && <ClientSignedDate ... /> }

And so on.

Edit: based on additional info, another option is:

const dateOptions = [CreatedDate, ClientSignedDate, VerificationDate];
const Comp = dateOptions[this.state.selection];  // pick element

then use

<Comp 
    from={this.props.filter.createdDateFrom}
    to={this.props.filter.createdDateTo}
    onChange={this.handleCreatedDateChange}
/>

User defined ponents must be capitalized to be able to render them.

Just try with:

<select>{dateOptions.map(Option => <option><Option /></option>)}</select>

Also keep in mind to set the key property for option element.

React ponents must be uppercase. From there you can use a variable ponent.

I recently referenced this question which helped me out. It's not exactly what you're asking, but it is stemming from the same problem. This question as well.

<select>{dateOptions.map((Option, index) => <option key={`unique_${index}`}><Option /></option>)}</select>

Make sure your key is unique when you use Array.map. If you add/remove Option ponents dynamically, you can run into problems using a simple array index in certain situations. Read more about that here.