3

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 component 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 components inside this class

const dateOptions = [CreatedDate,ClientSignedDate,VerificationDate];

It was previously working when there was only one component

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

And I basically want to render the component 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>
shashwatZing
  • 1,550
  • 1
  • 17
  • 24
  • Are you essentially asking how to render dynamic components, instead of using only static JSX? That's how I understand your question. –  May 23 '18 at 20:48
  • I want to render different components that take in same props based on what the user has selected. – shashwatZing May 24 '18 at 12:21

3 Answers3

4

And I basically want to render the component 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}
/>
  • Somebody is down voting all the answers here without any feedback. Thanks for your input I have not had chance to look at this. – shashwatZing May 24 '18 at 12:19
  • Thanks Man. I was able to go through your code. This is really neat. – shashwatZing May 24 '18 at 13:27
  • I actually downvoted the other two because they didn't understand what you were asking and thus gave useless answers. Mine was downvoted by someone who didn't understand it either, apparently. Since you told hsz about his solution working perfectly, I'm left wondering why on earth you're putting a Component with functions and properties and stuff inside an ` –  May 24 '18 at 13:47
1

User defined components 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.

hsz
  • 148,279
  • 62
  • 259
  • 315
1

React components must be uppercase. From there you can use a variable component.

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 components dynamically, you can run into problems using a simple array index in certain situations. Read more about that here.

domdambrogia
  • 2,054
  • 24
  • 31